Tota l'estructuració del contingut de la web es realitzarà utilitzant les noves funcionalitats que aporta HTML5 i CSS3, integrant la possibilitat de dotar d'un significat semàntic als diferents blocs de contingut.

Tanmateix, una gran part del codi es construirà sobre els fonaments desenvolupats en les anteriors versions d'HTML i CSS (potenciades amb HTML5 i CSS3). En aquest sentit té una especial importància el correcte posicionament dels diferents elements que conformen cada pantalla i l'elaboració d'un codi el més net i estructurat possible per aconseguir un comportament el més semblant en tots els navegadors.

L'activitat avaluativa referida a aquesta unitat formativa (UF1841) ha de contemplar una sèrie de continguts i funcionalitats que corresponen a la primera fase de l'activitat global.

Sobre aquesta base del contingut de la web construïda a la unitat formativa (UF1841) i realitzada sobre HTML5 i CSS3, a la unitat formativa posterior s'aniran integrant la resta de tecnologies, ja sigui dintre del mateix document html o bé vinculant fitxers i recursos diferents.

En alguns casos, tal com s'anirà indicant a continuació, algunes de les funcionalitats realitzades en aquesta primera fase de desenvolupament amb HTML5 i CSS3 s'aniran substituint, o bé potencialitzant, durant la segona unitat formativa amb funcionalitats de javaScript, ja que aporten una més gran potència interactiva, un control més efectiu i gestió sobre tots els elements de la web, així com una gran potència per augmentar la compatibilitat entre la majoria de navegadors. Aquest és el cas dels formularis, els mapes vinculats de googleMaps, la utilització de vídeos i àudios o la inclusió de la interactivitat amb majúscules en el funcionament de la majoria de les interfícies.

Per tal d'imitar la realitat professional actual existirà un client fictici. Es tractarà d'una empresa d'àmbit internacional ("Apartaments TweetTown") que es dedica al lloguer d'apartaments per dies a tot el món. Aquest client necessita una pàgina web realitzada en diferents fases de producció. Així, en aquesta primera fase el contingut serà estàtic i té com a objectiu que els usuaris puguin veure quines ofertes de lloguer d'apartaments existeixen i puguin contactar amb ells, ja sigui per a oferir apartaments propis per llogar, o bé per llogar un dels apartaments que la web ofereix. Aquesta empresa no posa en contacte a les dues partes, sinó que s'encarrega de totes les gestions administratives i econòmiques, de tal manera que propietari i llogater mai tinguin un tracte directe.

En aquesta primera fase la pàgina web contindrà els següents apartats (cadascun d'ells serà un fitxer html diferent, però interrelacionat a través d'enllaços web):

En totes les pàgines s'inclouen els punts d'informació rellevants abans enumerats (punt 3: Contingut dividit i estructurat en pàgines comunicades entre si), a més de:

• 1- Contingut semàntic.
• 2- Llistes desordenades (pels enllaços inclosos en totes les pàgines).
     - Text amb estils CSS (en fitxers CSS extern i interns).
• 4- Inclusió d'imatges (com a contingut, optimitzades, etiquetades i accessibles).
• 5- Utilització de tipografies (no habituals).
• 6- Posicionament dels diferents elements de la interfície.

• 15- Adaptació del contingut a qualsevol dispositiu i resolució (utilitzant "mediaqueries").
• 16- Adaptació a mòbils i tablets.

Qui som?

El client té tres delegacions repartides per tot el món. Així, en l'accedir a la pàgina l'usuari tindrà que col•locar el cursor del ratolí a sobre de la delegació de la qual es vulgui obtenir informació.

En aquesta primera fase de desenvolupament "l'event" que activa l'acció serà "mouseenter" (és a dir l'acció de col•locar el cursor a sobre), ja que és l'event d'HTML que millor es relaciona amb la funcionalitat "transition" (l'event "click" s'implementarà en la propera fase de desenvolupament amb javaScript).

Inicialment, les tres delegacions apareixen amb la informació mínima (ubicació, correu electrònic, telèfon i adreça) i quan l'usuari col•loca el cursor del ratolí a sobre de cadascuna una d'elles, es desplega la informació de la delegació seleccionada, ampliant l'àrea d'informació (a través d'una petita transició) que mostra -entre altres dades- el mapa de googleMaps corresponent. Quan l'usuari retira el cursor de l'àrea corresponent a la delegació, la finestra d'informació torna al seu estat i mida inicial a través d'una petita transició.

La millora que es realitzarà en la propera fase de desenvolupament serà substituir el mapa de googleMaps vinculat per un mapa creat íntegrament a través de codi javaScript i totalment personalitzat a través de l'API de googleMaps. Totes les característiques s'explicaran d'una manera molt més extensa a l'apartat corresponent a la unitat formativa (UF1842).

Per explicar els serveis i el funcionament de les fases de procés de lloguer de l'empresa s'utilitzen diverses animacions ('animation'). Una animació global i automàtica (que s'inicia amb un retràs 'delay' en accedir a la pàgina) i una per cada fase del procés general en dividir l'explicació d'aquest procés en diversos html (fases) lligats entre si.

La millora que es realitzarà en aquest apartat a la següent fase de desenvolupament es basarà en ampliar significativament els 'events' disponibles, és a dir, en l'ampliació de les possibilitats sobre "quan" i "de quina manera" s'activaran les animacions i la visualització de la informació dels elements actius de la interfície.

• 9- Vinculació de vídeos de youTube.
• 10- Inclusió de vídeos propis.
• 11- Inclusió d'àudios.
• 6- Posicionament dels diferents elements en la interfície.

Així, en una secció (o part) d'aquesta pàgina es vincularan diferents vídeos de youTube. En una altra secció (o part) es visualitzaran vídeos ubicats en el propi servidor del client (utilitzant la barra de visualització de vídeo predeterminada de cada navegador). Al mateix temps, en una altra secció (ben diferenciada gràficament de la resta) dintre de la mateixa pàgina, es podran llegir i escoltar diferents opinions (escrites i sonores) d'usuaris anteriors).

Aquesta secció es millorarà i ampliarà significativament amb els continguts tractats a les unitats formatives referides a javaScript (UF1842), PHP (UF1844) i MySQL (UF1845). Per això, en aquesta fase de desenvolupament, com la present unitat formativa (UF1841) no tracta continguts relacionats amb bases de dades ni sobre el llenguatge de programació PHP totes les dades d'aquest apartat seran continguts estàtics en aquesta primera fase.

• 7- Inclusió de formularis.

En tots dos formularis existeixen una sèrie de camps obligatoris (de contacte), altres que esperen un tipus de dada concreta (numèrica per a preus, de data pels inicis i finals del contractes de lloguers..) i altres camps exclusius, perquè l'usuari pugui introduir únicament un correu electrònic (utilitzant els nous <input> d'HTML5).

Després d'omplir -com a mínim - els camps obligatoris, i de manera correcta aquells camps que necessiten un contingut de tipus exclusiu, el formulari permet a l'usuari enviar les dades a un fitxer PHP (ja creat i proporcionat pel client) que dóna format a aquestes dades a través d'una estructura llegible i els envia a una adreça de correu electrònic (*1).

Els diferents camps de caràcter obligatori i aquells que necessiten un tipus de informació concreta es ressaltaran de manera automàtica d'un color (per exemple verd) quan les dades introduïdes siguin correctes i (per exemple, de color vermell) quan les dades siguin incorrectes o falti informació obligatòria per introduir (utilitzant CSS3).

(*1) Com en aquesta unitat formativa (UF1841) no s'inclou cap contingut relacionat amb PHP, ni sobre MySQL, la informació que l'usuari introdueix al formulari no s'envia a cap base de dades com seria habitual, sinó que s'enviarà a un correu electrònic. Aquesta millora s'introduirà posteriorment amb els continguts de les següents unitats formatives UF1842, UF1844 i UF1845.