Llenguatges i estàndards web - PAC2

En aquesta segona PAC es treballen aspectes concrets de la mquetació HTML, CSS tals com:

• Maquetació de taules
• Maquetació de formularis
• Maquetació de menús
• Maquetació per a dispositius mòbils

Per tant el nivell de dificultat ja augmenta.

Les preguntes i les meves respostes a la PAC:

 1. Tenim una taula amb 3 columnes i 6 files de contingut a més de les capçaleres th. La taula també té un caption i un summary. A més afegim un thead i tfoot. Explica per a què serveix el summary. Com han de ser l’HTML i el CSS que hi ha dins del tfoot i el caption perquè ocupin tot l’ample de la taula i tinguin el color de fons gris?

 

L’atribut summary és per donar informació de forma resumida dels continguts de la taula i com aquests estan organitzats en columnes i files. Aquesta informació no surt per pantalla però els “lectors” la llegeixen a part d’enriquir semanticament el contingut de la taula.

Marcat html de la taula:

<table summary=”resum del contingut de la taula”>
<caption>
Capçarera de la Taula (Títol)
</caption>
<thead>
<tr>
<th>columna 1</th>
<th>columna 2</th>
<th>columna 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3”>Peu de la taula</td>
</tr>
</tfoot>
<tr>
<td>contingut columna 1 - 1a fila</td>
<td>contingut columna 2 - 1a fila</td>
<td>contingut columna 3 - 1a fila</td>
</tr>
<tr>
<td>contingut columna 1 - 2a fila</td>
<td>contingut columna 2 - 2a fila</td>
<td>contingut columna 3 - 2a fila</td>
</tr>
<tr>
<td>contingut columna 1 - 3a fila</td>
<td>contingut columna 2 - 3a fila</td>
<td>contingut columna 3 - 3a fila</td>
</tr>
<tr>
<td>contingut columna 1 - 4a fila</td>
<td>contingut columna 2 - 4a fila</td>
<td>contingut columna 3 - 4a fila</td>
</tr>
<tr>
<td>contingut columna 1 - 5a fila</td>
<td>contingut columna 2 - 5a fila</td>
<td>contingut columna 3 - 5a fila</td>
</tr>
</table>

CSS de la taula:


table{border:1px solid #333; width:100%;}
table, th{ text-align:left}
caption, tfoot{background:#999;}

A l’etiqueta table li assignem un 100% d’ample perquè ocupi tot l’ample. Llavors a les etiquetes caption i tfoot li assignem un background de color gris.

2. Formularis. L’etiqueta label; l’element type per a l’etiqueta input. Explica quina és la utilitat de cadascun i com s’utilitzen. En el cas de type, enumera i explica els seus diferents possibles valors i per a què serveix cadascun d’ells. Posa un exemple en el qual s’usin correctament.

 

label

L’etiqueta <label> associa cada camp de formulari, generant un grup de: Explicació del camp – Entrada del camp, que defineix quin tipus de dada s’ha d’entrar a cada camp. Està clar que podríem posar text normal amb <p>, <h1>, <li>, etc..per indicar als usuaris que han d’entrar en cada camp, però el més correcte semànticament és utilitzar <label>, juntament amb el seu atribut for=”” associat a la id del camp de formulari, ja que a més a més serveix per indicar als “lectors” per a invidents, associant cada label al seu camp corresponent, ja que sinó omplirien els camps en qualsevol lloc. Una altra funcionalitat que té <label> és quan fem clic al text i automàticament es posa en el focus del camp. Exemple:

<form action=”” method=”post” name=”form” id=”form” title=”formulari”>
<label for=”nom”>Nom:</label>
<input type=”text” name=”nom” id=”nom” />
</form>

input

L’etiqueta <input>, serveix per a definir la majoria dels diferents elements d’un camp de formulari i serveix bàsicament per entrar dades. Dintre dels atributs més importants tenim “name”, que associa el valor entrat en el camp per poder ser processat per un script i l’atribut “value” per a definir un valor per defecte per al camp, i dintre els possibles “type” tenim:

“text”: Es una casella per a entrar text. El tamany del camp pot definir-se amb “size” i la llargada de text amb “maxlength”. Exemple:

<input type=”text” value=”” name=”nom” id=”nom” size=”25” maxlength=”20”/>

“radio”: Es un botó de selecció. És la millor opció quan es té que escollir una sola opció d’entre un grup d’opcions. Exemple:

<input type=”radio” name=”sexe” value=”home” checked=”checked”>Home
<input type=”radio” name=”sexe” value=”dona” >Dona

checkbox”: És un quadre de selecció. És la millor opció quan es pot escollir varies opcions d’entre un grup d’opcions sempre i quan la llista no sigui excessivament llarga, ja que llavor seria millor utilitzar l’etiqueta <select>. Exemple:

<input type=”checkbox” name=”aficions” value= “lectura”checked>Lectura
<input type=”checkbox” name=”aficions” value= “cine”checked>Cine
<input type=”checkbox” name= “aficions”value=”música”>Música

“button”: És per definir un botó estàndard. No està associat a l’acció de formulari d’enviament de dades “action” i normalment la utilitat que se li dóna és per fer alguna acció mitjançant javascript. Exemple:

<input type=”button” name=”boto” value=”acció”>

“image”: És un botó a partir d’una imatge en comptes del format estàndard de botons “submit” o “botton” per el que pot ser més personalitzat. La localització de la imatge es fa a traves de la seva ruta “src=” ruta imatge”. Exemple:

<input type=”image” name=”boto” src=”boto.jpg” width=”50” height=”20” hspace=”10” align=”middle”>

“password”: És per definir un quadre d’introducció de text on el contingut serà ocult (o sigui que sortiran asteriscs quan introduïm el text) Exemple:
<input type=”password” name=”password” size=”10” maxlength=”8” >

“hidden”: És un camp de formulari ocult, i serveix bàsicament per passar variables ocultes d’una pàgina una
altre. El valor de “value” és l’important i no té perquè ser fixe, ja que es pot modificar amb javascript o algun altre llenguatge. Exemple:
<input type=”hidden” name=”variable” value=”password”>

“file”: Defineix un botó per l’enviament d’arxius per part del usuari. L’atribut “accept” serà per definir quin
tipus d’arxius són vàlids per l’enviament. Perquè això funcioni a l’etiqueta de formulari té que estar enenctype=”multipart/form-data” . Exemple:
<input name=”imatge” type=”file” accept=”image/jpeg” value=”-” />

“submit” : Serveix per a definir el botó que enviarà les dades al script definit en la declaració del formulari. Exemple:
<input type=”submit” name=”enviarform” value=”Enviar” />

“reset” : Defineix un botó que posa a zero tots els camps del formulari.

3. Descàrrega l’emulador de navegadors mòbils d’Opera des d’http://dev.opera.com/articles/view/opera-mobile- emulator/ i visualitza la pàgina web d’un periòdic. Compara la versió mòbil amb la versió ”convencional” per a navegadors d’escriptori (obrint-la en un navegador com Opera, Firefox, Chrome...) Descriu les diferències que existeixen entre les 2 versions. Comenta breument quins aspectes creus que haurien de tenir-se en compte en maquetar una web destinada a la seva visualització en una pantalla de mòbil, sabent que la majoria de mòbils tenen pantalles petites i de molt diferents resolucions.

 

Aspectes a tindre en compte en webs per a dispositius mòbils:

Les webs per a dispositius mòbils haurien de ser més simples en continguts: menys text, imatges més petites i

menú de navegació també més simple i suficientment separat en cada enllaç, ja que tenim que tindre en compte que la navegació es farà mitjançant el teclat o amb els dits (pantalles tàctils), per el que els enllaços molt junts poden portar a errors del usuari en la navegació. També haurien d’estar maquetades a 1 columna a tot l’ample de la pantalla en %, i mai a un tamany fixe, ja que la navegació serà molt dificultosa si hem de desplaçar-nos horitzontalment per la pàgina. Pel que fa als camps de formulari també hauriem de ser més simples i amb menys dades a entrar que en el cas de les webs per a escriptori pel mateix motiu de que és més tediós entrar dades en un teclat mòbil que en un teclat d’escriptori.

Webs analitzades

www.elpais.com – El País
www.elperiodico.com – El Periódico

El País

Tenen dos formats diferents. Un per web d’escriptori i l’altre per a dispositius mòbils. Els continguts en portada són diferents, però en els articles són iguals. En portada tan sols es veu el titular de cada noticia i el text a tot l’ample de pantalla i al peu de la pàgina hi ha el menú de navegació. En l’aplicació per a escriptori la portada està a 3 columnes. La web la veig ben maquetada tant per a escriptori, com la versió per a dispositius mòbils, i jo tan sols separaria una mica els enllaços de la llista del menú de navegació, ja que si naveguem en una pantalla tàctil amb els dits ens pots portar a errors quan fem clic.

El Periódico

Els continguts en portada visualitzats en un dispositiu mòbil es mostren a 1 columna en forma de llista i són els mateixos continguts que per al format d’escriptori. No obstant, no es mostren a tot l’ample de la pantalla, per el que són molt petits i no s’entén res del contingut si no t’apropes fent zoom. Un cop dins de cada article, les noticies si estan a tot l’ample de pàgina, però hi ha contingut que s’hauria eliminar ja que no és funcional per a dispositius mòbils, com és el tema de la icona per imprimir. Jo canviaria la portada per un disseny fluit en % a tot l’ample de la pàgina i separaria també els elements de la llista del menú de navegació, com també donaria una mica d’espai en el text dins dels articles, separant el que són titulars, articulista, text, comentaris de la introducció del següent article perquè quedi tot més clar.

 

4.01 Com es poden utilitzar els elements flotants per mostrar miniatures d’imatges en una galeria de “cel·les” de la mateixa grandària sense utilitzar una taula per a la distribució? (Heu d’explicar el procediment amb claredat).

 

El marcat html:

 

<div>
<ul>
<li class=”actiu”><a href=”#” >Opció 1</a></li>
<li><a href=”#”>Opció 2</a></li>
<li><a href=”#”>Opció 3</a></li>
<li><a href=”#”>Opció 4</a></li>
<li><a href=”#”>Opció 5</a></li>
</ul>
</div>

 

El CSS:

 

div {width:800px;height:32px;border:1px solid #000;}
ul {list-style-type: none;margin: 0 auto;padding: 0;text-align: center;}
li{display:block;f loat:left;width:158px;background-color:#999;margin:1px;padding-top:5px;paddingbottom:
5px;color:#FFF;}
a:link{text-decoration:none; color:#FFF}
.actiu {background:#F00}

 

Poso un div en el marcat html on assigno una amplada de 800px, i una vora de 1px (això ho faig per jo assegurarme visualment que el menú ocuparà 800px).

Tot seguit faig una llista no ordenada on col·locaré tots els enllaços on poso un marge automàtic als costats de la llista i un padding 0px i faig que el text estigui centrat. Als elements de la llista <li> els converteixo en elements de bloc i el faig flotar a l’esquerra i li assigno color de fons gris. Calculo l’ample de cada element de la llista sabent que vull un marge de 1px, per el que cada element hauria de tenir 800px / 5 enllaços = 160 px – 1 px de marge per cada costat, seran 158px d’ample. Tot seguit declaro la classe “actiu” i poso el color de fons vermell.