Desenvolupament web estàtic amb HTML + CSS
Conceptes¶
Sessió 7¶
Objectiu Sessió 7
L'objectiu d'aquesta 7a sessió és iniciar el concepte de desenvolupament d'un projecte de pàgina o lloc web.
Projecte¶
Recordem la pregunta que li feiem al ChatGPT al principi de tot: Què significa crear una pàgina web? Doncs, arribats a aquest punt hem vist bona part dels conceptes, tècniques i habilitats que calen o es poden usar per a crear una web.
Una tàctica exitosa en aquesta creació serà la definir un projecte per al seu desenvolupament.
Aquest projecte pot basar-se en uns paràmetres mínims de planificació i execució o bé en complexes estructures àgils d’implementació per assolir amb èxit l’objectiu.
Per exemple
-
Scrum
Descripció: Metodologia àgil que divideix el treball en sprints (cicles curts, normalment de 2 a 4 setmanes). Cada sprint té una reunió de planificació i una revisió final.
Avantatges: Fomenta la col·laboració, la flexibilitat i la capacitat d'adaptació als canvis.
-
Kanban
Descripció: Metodologia visual que utilitza un tauler per gestionar el flux de treball. Les tasques es representen amb targetes que es mouen entre columnes que representen diferents etapes del procés.
Avantatges: Millora la visibilitat del treball en curs i ajuda a identificar colls d'ampolla.
-
Waterfall (Cascada)
Descripció: Metodologia tradicional que segueix un enfocament seqüencial. Les fases (anàlisi, disseny, implementació, proves i manteniment) s'executen en un ordre fix, sense retrocedir.
Avantatges: Ofereix una estructura clara i és fàcil de gestionar, especialment en projectes amb requisits ben definits i poc canviants.
Cada metodologia té els seus propis punts forts i limitacions, així que l'elecció dependrà de les necessitats del projecte i de l'equip.
Generar documentació
En aquest punt d’aprenentatge nosaltres definirem i documentarem els següents elements sobre una web estàtica HTML+CSS.
Veiem-ne els punts:
-
Disseny
-
Objectiu
Descripció del que ha de ser el web que desenvoluparem. Usarem un llenguatge natural. Identificant quin és el públic objectiu i qui utilitzarà el projecte web. Estudiarem quines són les necessitats i expectatives dels usuaris.
Si és necessari es planificaran diferents reunions de 'briefing' amb les persones per determinar el disseny, la funcionalitat i el seu contingut.
-
Requisits
Requisits funcionals: Descripció de totes les funcions que ha de tenir el web
Requisits no funcionals: Descripció de com es vol que sigui el sistema -
Estructura web
Documentar l’estructura de carpetes que tindrà la web, així com marcar les rutes dels enllaços.
-
Disseny interficie
Crearem els Wireframe de la web, en format dibuix manual Definirem la paleta de colors Generarem les imatges i el logo
-
-
Desenvolupament
Tot seguit passarem al desenvolupament pròpi del web.
Al ser una web estàtica, en aquest punt no caldrà etapa de programació, bàsicament realitzem maquetació.
Podrem tenir en compte algunes recomanacions enfocades a SEO →.
-
Seguiment
Caldrà anar pujant regularment al git el codi generat. D'aquesta manera es pot visualitzar el progrès regular i si s'escau es pot tornar a una versió del codi concreta. Si les pujades corresponen a funcionalitats acabades, podrem publicar una versió o altra fàcilment.
-
Proves
Realitzarem un conjunt de proves amb diferents navegadors i dispositius, provant així la responsivitat i adaptabilitat de les interfícies generades.
Caldrà realitzar sobre proves funcionals del que s'ha desenvolupat.
També podem testejar el codi web generat a W3C Validation →
Ull !
De moment, en aquest punt, no parlarem d’allotjament web específicament parlant !
Info
Més endavant es poden aplicar tècniques de planificació i seguiment basades en alguna de les metodologies anomenades anteriorment Scrum o Kanvan. Ara el que farem serà seguir una tècnica seqüencial o en cascada de les diferents etapes a desenvolupar.
Les proves en aquest punt seran més simples basades en la validació de contingut, format i estil aplicat. Més endavant incorporarem les proves sobre la lògica del codi desenvolupat per generar dinamisme.