Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Llenguatges i Estàndards Web - PAC 2 - Multimedia (UOC) - Paquita Ribas

2,228 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Llenguatges i Estàndards Web - PAC 2 - Multimedia (UOC) - Paquita Ribas

  1. 1. PAQUITA RIBAS TUR – ESTANDARDS WEB – PAC 21 - Tenim una taula amb 3 columnes i 6 files de contingut a més de les capçaleres th. Lataula 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 lHTML i el CSS que hi ha dinsdel tfoot i el caption perquè ocupin tot lample 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, pertant, el resum de la taula.El caption és el títol visible de la taula i ja ocupa per defecte el llarg de totes lescolumnes. En el cas del tfoot, constitueix el peu. S’afegiria l’atribut colspan amb elnombre 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 seriaaixí: <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. 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. 3. 2 - Formularis. Letiqueta label; lelement type per a letiqueta input. Explica quina ésla utilitat de cadascun i com sutilitzen. En el cas de type, enumera i explica els seusdiferents possibles valors i per a què serveix cadascun dells. Posa un exemple en elqual susin 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 espitja sobre un text associat a un camp, el camp se selecciona.L’etiqueta <input> defineix la majoria dels elements del formulari. Totes etiquetesinput han de tenir un atribut type, un atribut name i un atribut value. Només defineixuna 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 posachecked (value="checked"), la casella de verificació apareix marcada per defecte, si esposa 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à elsque 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 tipusd’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 cometesde value posem “checked”, la casella ja surt marcada per defecte. Si no posem res, esa dir value=””, la casella surt en blanc, però es pot marcar. <input type="checkbox" name="spam" value="checked" >Vull rebre publicitatpassword – S’utilitza per a introduir una contrasenya. En aquest cas no s’imprimeixen elscarà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 mateixatribut 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. 4. submit – És un botó que s’utilitza per a enviar les dades del formulari al programaespecificat 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 alsvalors 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’atributsrc 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’unformulari 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.css3 - Descàrrega lemulador de navegadors mòbils dOpera desdhttp://dev.opera.com/articles/view/opera-mobile-emulator/ i visualitza la pàgina webdun periòdic. Compara la versió mòbil amb la versió ”convencional” per a navegadorsdescriptori (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 maquetaruna web destinada a la seva visualització en una pantalla de mòbil, sabent que la majoria demòbils tenen pantalles petites i de molt diferents resolucions. (20 punts)
  5. 5. El país, versió clàssica (www.elpais.com):El país versió mòbil (http://wap.elpais.com):
  6. 6. El Periódico, versió clàssica (www.elperiodico.com):El Periódico, versió mòbil (m.elperiodico.com/es/):
  7. 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 primero 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 apareixfotografies, 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 potarticles, els pot valorar i els pot compartir a enviar missatges personals, ni valoracions i eltravé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 zoomPàgina web on es pot trobar software per a persones discapacitades, com lectors depantalla 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. 8. 4 - Com es poden utilitzar els elements flotants per mostrar miniatures dimatgesen una galeria de "cel·les" de la mateixa grandària sense utilitzar una taula pera la distribució? (Heu dexplicar 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 donareml’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 unpadding 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 elpadding 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 fa100px 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. 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 sha deressaltar. El color de fons dels menús no seleccionats és gris, el del menúseleccionat és vermell. Explica lHTML i CSS necessaris amb una de lesopcions 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 ambdisplay: inline. També els donaria espai a dalt i als costats i el color gris i centraria eltext 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. 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ó quecorrespon 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

×