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 1 correccció - Multimedia (UOC) - Paquita Ribas

2,289 views

Published on

Correcció de la PAC 1 de l'assignatura de Llenguatges i Estàmdards 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 1 correccció - Multimedia (UOC) - Paquita Ribas

  1. 1. PAC1 - CorreccióP1.- (5 punts) Quines versions dHTML, XHTML i CSShem dusar a les nostres pàgines web?Dient que dʼHTML estem a la versió 4.01, dʼXHTML 1.0 i de CSS 2 sʼobtenien 4 punts.En cas dʼexplicar que de la versió 4.01 dʼHTML tenim la versió Strict i transitional sʼobteniael punt que faltava.En cas de comentar les versions css3, html 5, etc.. es podia obtenir un punt extra.(anulantalgun error anterior)P2.- (10 punts) Enumera les diferents formes dusarCSS en una pàgina web. Per què és, en general, unapràctica dolenta embeure els estils dins de lHTML? Setacut algun cas en el qual pugui ser una bona idea?Amb anomenar i explicar les diferents formes 4 punts:-Full destils extern: Consisteix en un arxiu vinculat al document HTML. Ha destar al <head> del document i serà vàlid per tota la web. Podem vincular-ho al document mitjançant lelement <link> o @import. - <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> (href apunta larxiu CSS, media defineix el suport i type el recurs) - <style type="text/css" media="screen"> @import url("styles.css"); ...aquí podem posar altres enunciats o estils CSS per importar-los... </style>- Estils incrustats: Dins lelement <style>, situat al <head> del document, declarem les regles destil, així aquestes seràn reconegudes abans que cargui completament la pàgina. Estan limitats a un únic document. <head> <style type="text/css" media="screen"> p { color:white; background:blue; </style> </head>- Estils en linia: És la manera daplicar estils a lelement que ho necessita directament al <body> del document, mitjançant lelement <style>. És una pràctica dolenta perquè estarem barrejant contingut amb presentació. <p style="background:blue; color:white; padding:5px;">Text</p>
  2. 2. Es donaven 3 punts per pregunta contestada, ben argumentada i coherent.P2.1 - La millor manera és mitjançant una fulla dʼestils extern, principalment perque enspermet separar disseny dʼestructura. Ens permet un millor manteniment, ja que podemtrobar amb facilitat els errors de css comesos.P2.2 - Principalment ens pot interesar si volem invalidar un css que estigui declarat a unnivell superior i que no puguem invalidar de cap altre manera. També ens pot servir enocasions especials com en creacions de newsletters (Però aquesta es una altre història).P3.- (5 punts) Quins elements poden aparèixer dins delelement <head>?Titlemetastyle / linkscriptbase: com a punt extra.(Explicats com és degut.)P4.- (10 punts) Quines diferències hi ha entre unaclasse i una id?Aquest apartat ha fet molt mal.id: - És únic per element i pàgina. - Permet ser referenciat com àncora.classe: - Pot haver-hi més dʼuna clase per pàgina. - Un element pot tindre més dʼuna clase assignada.Si sʼha contestat el primer apartat de cada punt eren 8 punts per tots els apartats 10punts.P5.- (15 punts) Quina és lestructura bàsica dundocument XHTML? Quina és lestructura més simplepossible dun document XHTML que validi? Explicabreument per a què sutilitzen cadascun dels seuselements.
  3. 3. Lestructura bàsica dun document XHTML que validi és la següent:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Validació bàsica</title></head><body></body></html>Doctype<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Element que explica quin tipus de HTML estem utilitzant, a la vegada que indica alsnavegadors la manera de mostrar correctament el document.<html> … </html>Tot el contingut de la pàgina web anirà escrit dins aquest element. Letiqueta detancament és lúltim que es veurà al nostre codi. Dins daquest, per tant, anirà el<head> I el <body>.Com estem construint una web amb llenguatge XHTML, aquest necessita unadeclaració xmlns, que la colocarem dins letiqueta dobertura de <html><html xmlns="http://www.w3.org/1999/xhtml"><head> … </head>Element on colocarem la major part de les instruccions pel navegador, a més de lainformació adicional del document. No serà visible pels usuaris.Dins daquest colocarem el <title> … </title>, que és un dels elements més importantdel head. És el primer que veuran els usuaris. Es veurà el text que hem escrit a labarra superior del navegador.Sense aquest <title> la pàgina també validarà, però ho he inclós perqué ho consideroun element molt important.<body> … </body>Aquí és on colocarem tot el contingut real de la pàgina, que serà visible per tots elsusuaris.P6.- (15 punts) Investigació. En aquests moments sestàelaborant lestàndard HTML5. Busca informació en laweb sobre lestat daquest projecte i les principalsdiferències que suposarà HTML5 quant al marcat delsdocuments. Fes-ne un informe dʼaproximadament 500paraules. És essencial que citis les fonts dinformacióque has utilitzat.Quasevol argumentació correcte i coherent donava els 15 punts.
  4. 4. P7.- (10 punts) Digues si són correctes o incorrectes elssegüents fragments de codi (en XHTML). En cas quesiguin incorrectes, indica per què.Dʼentrada dir que totes eren, per un motiu o un altre, incorrectes.<strong>Text negreta i <i>cursiva</strong></i>Mal anidades i mal ús del significat semàntic dʼstrong, ja em dit que és més correcte em.<h7>Títol</h7>No existeix un element h7!<h1><strong>Un altre títol</strong></h1>Aquest ha donat en general bastants mals de cap, ja que es un trós de codi que valida.Per solucionar-ho sʼhavia de recorre a la lògica:Un títol cal emfatitzarlo? Perque sʼha posat strong aqui? que es pretenia?El que sembla que es volia pretendre era donar negreta al títol, és a dir, fer ús de strongcom element presentacional i no semàntic. Si sʼhavia de canviar lʼestil del contingut eramitjançant css. A part sʼha de tindre en compte altre cop el significat semàntic dʼstrongvers em.<h2><p>I encara un altre títol</p><p>Amb el seu subtítol</p></h2>Veiem que en un h2 sʼintenta mostrar un títol i un subtítol a la vegada. Sabem que percada títol sʼha de fer servir un “h” diferent, segons el nivell dʼaquest (titol, subtitol, …)Per tant hauria de quedar:<h2>I encara un altre títol</h2><h3>Amb el seu subtítol>També era correcte dir que com que els “hs” son elements en bloc no poden contindre unaltre element en bloc.<em class=enverd>Text en color verd</em>Falten les cometes a la clase enverd <em class=”enverd”><ul><li>Primera entrada<ul><li>Primera subentrada</li><li>Segona subentrada</li><li>Tercera subentrada</li></li></ul><li>Segona entrada</li><ol><li>Primera subentrada</li><li>Segona subentrada</li><li>Tercera subentrada</li></ol></ul>Llistes mal imbrincades, tant la primera com la segona entrada.
  5. 5. <ul><li>Primera entrada <ul> <li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li> </ul></li><li>Segona entrada <ol> <li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li> </ol></li></ul>P8.- (10 punts) De quines formes es poden especificarla grandària del text usant CSS? Quins són lesdiferències entre elles? I els avantatges i inconvenientsde cadascuna delles?Amb lʼexplicació de les diferents propietats de font-size, les diferències dʼaquestes i lesavantatges i inconvenients nʼera més que suficient.Tipus dunitats: - ems de CSS (em),- paraules clau (large,...),-%- píxels (px)- punts (pt)- Absolutes (px, pt): Per composicions fixes o estàtiques en relació al llenç.- Relatives (em, %): Per composicions no estàtiques. (Al body normalment esposa em)- Paraula clau: Quan la usabilitat sigui més important que el disseny.P9.- (10 punts) Posa un exemple de pàgina web noaccessible (desafortunadament, són fàcils de trobar) iexplica alguns dels motius pels quals no ho és.Amb posar un exemple real i veure que realment havieu identificat les mancançessʼobtenien els 10 punts.Sempre i quant estigués ben argumentat.
  6. 6. P10.- (10 punts) Observeu la següent captura depantalla:Aquesta pregunta només podia ser correcte o incorrecte.img { border:2px solid #ccc; margin:5px; }Altres opcións amb padding o variant els valors no han sigut correctes.Si sʼhagués presentat qualsevol atre opció correcte i que validès també sʼhagués donatper bona.

×