PAC 2 de l'assignatura de Llenguatges i Estàndards Web del Grau Multimèdia de la UOC

1. PAQUITA RIBAS TUR – ESTANDARDS WEB – PAC 2
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?
(20 punts)
El summary és el títol de la taula que llegiran els lectors de pantalla. Ha de constituir, per
tant, el resum de la taula.
El caption és el títol visible de la taula i ja ocupa per defecte el llarg de totes les
columnes. En el cas del tfoot, constitueix el peu. S’afegiria l’atribut colspan amb el
nombre de columnes que volem que ocupi. En aquest cas colspan=”3”.
El CSS perquè els dos elements tinguin el fons gris, seria:
Caption tfoot {
background: gray;
}
Si volem fer un exemple d’una taula d’aquestes característiques, l’HTML de la taula seria
així:
<table summary="resum el contingut de la taula">
<caption>Títol de la taula</caption>
<thead>
<tr>
<th>Títol columna 1</th>
<th>Títol columna 2</th>
<th>Títol columna 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Peu de la taula</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>fila1 – col1</td>
<td>fila1 – col2</td>
<td>fila1 – col3</td>
</tr>
<tr>
<td>fila2 – col1</td>
<td>fila2 – col2</td>
<td>fila2 – col3</td>
</tr>
<tr>
<td>fila3 – col1</td>
<td>fila3 – col2</td>
<td>fila3 – col3</td>
</tr>
<tr>
<td>fila4 – col1</td>

2. <td>fila4 – col2</td>
<td>fila4 – col3</td>
</tr>
<tr>
<td>fila5 – col1</td>
<td>fila5 – col2</td>
<td>fila5 – col3</td>
</tr>
</tbody>
</table>
Si apliquem aquest CSS:
table {
font-family: verdana, sans-serif, arial;
text-align: center;
margin: 10px;
}
td, th {
padding: 6px 20px;
}
caption {
background: gray;
padding: 6px 20px;
font-weight: bold;
}
tfoot {
background: gray;
}
Ens quedaria una taula així:
Documents adjunts: taules.html; pac2.css

3. 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. (20 punts)
L’etiqueta <label> associa un text a un camp. Les vinculacions es fan a través d’una id.
En els botons es pot utilitzar l’atribut value. Quan label està associat a imput, si es
pitja sobre un text associat a un camp, el camp se selecciona.
L’etiqueta <input> defineix la majoria dels elements del formulari. Totes etiquetes
input han de tenir un atribut type, un atribut name i un atribut value. Només defineix
una sola línia. Si volem introduir més text ho hauríem de fer amb l’etiqueta <textarea>.
Amb aquest element s’ha d’especificar les files (rows) i les columnes (cols).
Si value es deixa en blanc (value=""), la casella es pot reomplir per l’usuari, si es posa
checked (value="checked"), la casella de verificació apareix marcada per defecte, si es
posa submit (value=”submit”), mostrarà un botó de tramesa i si posa reset
(value=”reset”), mostrarà un botó que esborrarà els camps del formulari i deixarà els
que estan marcats per defecte.
L’atribut name serveix perquè els elements input es trametin al servidor.
type és un atribut que utilitzen totes les etiquetes dels formularis. Defineix el tipus
d’informació que rep l’etiqueta.
Els valors són: text, button, checkbox, file, hidden, image, password, radio,
reset, submit.
text – S’utilitza per a l’entrada d’una línia de text (nom, dates, etc.)
<labelfor=”nom”>Nom:</label>
<input type="text" name="name" id="nom" value="" >
checkbox – Defineix caselles de verificació. Es poden marcar vàries. Si entre les cometes
de value posem “checked”, la casella ja surt marcada per defecte. Si no posem res, es
a dir value=””, la casella surt en blanc, però es pot marcar.
<input type="checkbox" name="spam" value="checked" >Vull rebre
publicitat
password – S’utilitza per a introduir una contrasenya. En aquest cas no s’imprimeixen els
caràcters segons es van introduint, en el seu lloc es mostra un asterisc (*).
<labelfor=”contrasenya”>Contrasenya</label>
<input type=”password” name=”password” id=”contrasenya”
value=”password”>
radio – S’utilitza per escollir una opció d’una sèrie d’alternatives que tenen el mateix
atribut name i un value diferent.
<input type=”radio” name=”sexe” id=”home” value=”opcio 1”>Home
<input type=”radio” name=”sexe” id=”dona” value=”opcio 2”>Dona

4. submit – És un botó que s’utilitza per a enviar les dades del formulari al programa
especificat en action.
<input type=”submit” value=”ENVIAR”>
reset – Es un botó que esborra totes les dades que s’han introduït al formulari i torna als
valors per defecte.
<input type=”reset” value=”BORRAR”>
button – Defineix un botó estàndard. Normalment té utilitat amb JavaScript
<input type=”button” name=”sortir” value=”Sortir del formulari”>
image – Substitueix el botó submit per una imatge que fa la mateixa funció. L’atribut
src ens indicaria l’URL de la imatge.
<input type=”image” src=”boto.jpg”>
file – Serveix per adjuntar un arxiu al formulari.
<input type=”file” name=”redirect” value=”” >
hidden – S’utilitza per a guardar informació constant i que és necessari passar d’un
formulari a un altre. El navegador no mostra res ja que és un camp invisible.
<input type=”hidden” name=”contrasenya“ value=”1234”>
Documents adjunts: formulari.html; pac2.css
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. (20 punts)

5. El país, versió clàssica (www.elpais.com):
El país versió mòbil (http://wap.elpais.com):

6. El Periódico, versió clàssica (www.elperiodico.com):
El Periódico, versió mòbil (m.elperiodico.com/es/):

7. DIFERÈNCIES
WEB CLÀSSICA WEB MÒBIL
És plena d’imatges, anuncis publicitaris i Té poques imatges i no hi ha anuncis.
animacions.
El menú principal de navegació apareix al El menú principal apareix a baix.
principi, en la part superior.
Les notícies de portada consten d’una imatge Les notícies de portada apareixen en primer
o vídeo, un títol i una introducció. lloc i consten d’un títol i una petita
introducció.
Quan es tria un article, aquest apareix amb Quan es selecciona un article, aquest apareix
fotografies, els enllaços a altres articles de latot sol, amb el menú principal a sota.
secció, enllaços a altres seccions i anuncis.
El lector pot enviar comentaris personals als El lector només pot llegir l’article. No pot
articles, els pot valorar i els pot compartir a enviar missatges personals, ni valoracions i el
través de xarxes socials. pot compartir a través de les xarxes socials.
Sobredosi d’informació per a tot arreu. Simplicitat.
Aspectes de la maquetació d’una web per a dispositius mòbils:
- Separar el contingut realment importat (l’article en sí) i el que no és (anuncis). El
Contingut important ha d’aparèixer quan s’accedeix el primer cop.
- La part principal de la pàgina s’hauria de poder visualitzar sense desplaçaments.
- L’usuari no hauria de utilitzar la barra de desplaçament per a visualitzar el
contingut important. El més ideal seria que, en el cas de necessitat, només hi
hagués un scroll vertical.
- Els continguts han de ser simples i s’ha de poder accedir a ells amb pocs clics.
- Els anuncis o les finestres emergents són innecessaris, ja que fan que la pàgina tardi
més en carregar-se i l’usuari pagui més diners per la connexió.
- Els títols han de ser curts i descriptius, ja que l’espai és limitat.
- El contingut s’ha de poder visualitzar amb diferents resolucions.
- Evitar l’entrada de text. La selecció és millor.
- Assignar tecles d’accés ràpid.
- Evitar imatges de gran mida.
- Evitar la maquetació en taules. Suposo que els floats s’adaptarien millor als
diferents dispositius.
- No abusar de continguts multimèdia. Alguns dispositius encara no els suporten
(Exemple: pel·lícules flash)
- Pensar en les persones que tenen diferents tipus de discapacitats:
o Posar informació a totes les imatges i gràfics.
o Utilitzar una terminologia senzilla, sense terminologia poc usual.
o Opcions de reconeixement de veu, per a persones amb dificultats en
manipular físicament el dispositiu.
o Evitar gran nombre d’opcions per a poc espai
o La pantalla s’hauria de poder augmentar mitjançant un zoom
Pàgina web on es pot trobar software per a persones discapacitades, com lectors de
pantalla o magnificadors de pantalla per a telèfons mòbils :
http://www.codefactory.es/en/
Resumint: Una pàgina web mòbil ha de tindre un menú de navegació senzill, menys text,
menys imatges i més petites, pocs enllaços i molt poca publicitat.

8. 4 - 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) (20 punts)
En primer lloc , en l’HTML col·locaria les imatges dintre de la etiqueta span
<p>
<span><img src="foto1.jpg"></span>
<span><img src="foto2.jpg"></span>
<span><img src="foto3.jpg"></span>
<span><img src="foto4.jpg"></span>
<span><img src="foto1.jpg"></span>
<span><img src="foto2.jpg"></span>
<span><img src="foto3.jpg"></span>
<span><img src="foto4.jpg"></span>
<span><img src="foto1.jpg"></span>
<span><img src="foto2.jpg"></span>
<span><img src="foto3.jpg"></span>
<span><img src="foto4.jpg"></span>
<span><img src="foto1.jpg"></span>
<span><img src="foto2.jpg"></span>
<span><img src="foto3.jpg"></span>
<span><img src="foto4.jpg"></span>
</p>
Les meves imatges són quadrades i tenen totes la mateixa mida. En el CSS li donarem
l’amplada de 100px. L’alçada es proporcionarà amb l’amplada.
img {
width: 100px;
}
Desprès li donaria estils a l’etiqueta span.
span {
float: left;
background-color: #D8DADC;
border: 2px solid pink;
padding: 10px;
margin: 10px;
width: auto;
}
Flotaria a l’esquerra, amb un color gris clar i un border de 2 px de color rosa. Li donaria un
padding de 10px per a separar la imatge del border i un margin de 10 px per a separar els
“flotants” entre sí. L’amplada auto perquè s’adapti a la mida de la foto, respectant el
padding establert.
Per fer que les imatges estiguin enquadrades amb un fons negre, l’he donat el color a <p>
També he calculat la mida de cada imatge per a poder fer quatre columnes. Cada imatge fa
100px d’amplada + (10+10) de padding + (2+2) de border + (10 + 10) de margin = 144.
144 x 4 columnes = 576. Per tant, el CSS seria:
p {
float: left;
background: black;
width: 576px;
}
Documents adjunts: miniatures.html; pac2.css

9. 5 - Com faries un menú horitzontal de 5 opcions amb un ample de 800px en total?
Cal tenir en compte que sempre hi ha un element seleccionat que s'ha de
ressaltar. El color de fons dels menús no seleccionats és gris, el del menú
seleccionat és vermell. Explica l'HTML i CSS necessaris amb una de les
opcions del menú seleccionades. (20 punts)
En primer lloc crearia una llista desordenada amb els enllaços que corresponen.
La col·locaria dintre d’un <div> per a poder donar l’amplada.
Marcaria amb id els div i els ul.
<div id=”menu”>
<ul id="llistahoritz">
<li><a href="menu.html">EMPRESA</a></li>
<li><a href="serveis.html">SERVEIS</a></li>
<li><a href="galeria.html">GALERIA</a></li>
<li><a href="descarregues.html">DESCÀRREGUES</li>
<li><a class="red" href="contacta.html">CONTACTA</li>
</ul>
</div>
En el CCS eliminaria els margin i padding de <ul>
#llistahoritz ul{
margin: 0;
padding: 0;
}
Com els elements de llista són elements de bloc, el convertiria amb en línia amb
display: inline. També els donaria espai a dalt i als costats i el color gris i centraria el
text dins del botó.
#llistahoritz li {
display: inline;
padding: 5px 10px;
background: grey;
text-alingn: center;
font-size: small;
}
Donaria l’amplada al contenidor del menú.
div #menu {
width: 800px;
}
Donaria amplada al botons amb un marge de 2px al voltant
#llistahoritz li {
display: inline;
padding: 5px 10px;
background: grey;
text-alingn: center;
font-size: small;
float: left;
border: 2px solid #68676B;
width: 156px;
}

10. Per a poder controlar els estils dels enllaços posaria:
a {
text-decoration: none;
color: black;
}
Perquè l’element actiu aparegui en vermell posaria:
li a:active {
background: red;
font-weight: bold;
color: white;
}
He fet que quan s’activi, les lletres es posin en negreta i de color blanc.
Perquè el menú de la pàgina seleccionada surti en vermell donaria una classe al botó que
correspon a cada pàgina.
<li><a class="red" href="menu.html">EMPRESA</a></li>
<li><a href="serveis.html">SERVEIS</a></li>
<li><a href="galeria.html">GALERIA</a></li>
<li><a href="descarregues.html">DESCÀRREGUES</li>
<li><a href="contacta.html">CONTACTA</li>
Amb el CSS següent
.red {
background: red;
padding: 5px 10px;
}
Documents adjunts: menu.html; serveis.html; galeria.html; descarregues.html;
contacta.html; pac2.css