Aquesta primera PAC va ser bastant fàcil, tot i que algunes preguntes requeria feina d'investigació. Es tractava de respondre algunes preguntes de nivell bàsic (i algunes més avançades) sobre maquetació HTML, CSS.
Les preguntes:
Quines versions d'HTML, XHTML i CSS hem d'usar a les nostres pàgines?
Estils en línia: és quan inserim els estils directament dintre dels tags html.
exemple:
<div style="font-size: 10px;"></div>Estils incrustats: es col·loquen dins l'element head .
exemple:
<style type="text/css" media="screen"> h1{color:#000}</style>Estils exteriors: es tracta de col·locar un arxiu extern que contingui els estils. Dins l'html el css es cridat mitjançant l'element link.
exemple:
<link rel="stylesheet" href="estil.css" type="text/css" media="screen" />
Els estils en línia poden ser una bona idea quan tenim una petita modificació a realitzar en una pàgina html en concret i l'estil extern o incrustat sigui difícil d'interpretar perquè sigui molt extens o mal estructurat llavors és més pràctic i fàcil inserir un estil en línia directament al tag html que vulguem modificar.
Quins elements poden aparèixer dins de l'element <head>?
Elements: title, meta, link, script.L'element més important segurament és el tag title ja que és l'únic que apareix directament a la web.
D'altra part també poden aparèixer els elements meta (de fet és convenient incloure'ls) amb tot els seus possibles atributs per a "name" i "content", però de fet els més recomanables tan sols són dos: "description" i "keywords".
També poden apareixer la etiqueta <link>, que normalment s'utilitza per enllaçar amb la fulla d'estils css :
link href="estil.css" type="text/css" rel="stylesheet">
o l'etiqueta <script> que normalment s'utilitza per enllaçar amb un fitxer javascript extern:
<script src="funcions.js" language="JavaScript"> </script>
Quines diferències hi ha entre una classe i una id?
L'atribut "class" serveix per associar estils a l'element que el conté. La sintaxi de l'atribut "class" es:.nomClase{propietat: valor estil}
o també podriem posar una etiqueta html:
p.nomClase{propietat: valor estil ; propietat: valor estil}
llavors en el html cridariem a la clase de la seguent manera:
<p class="nomClase">text</p>
L'atribut "id" serveix per edentificar d'una forma única a un element dins d'un document html. És un selector més especific que no l'atribut "class". La sintaxi de l'atribut "id" es:
#nomIdentificador{propietat: valor estil}
llavors en l'html cridariem al identificador id de la seguent manera:
<p id="nomIdentificador">text</p>
Quina és l'estructura bàsica d'un document XHTML? Quina és l'estructura més simple possible d'un document XHTML que validi? Explica breument per a què s'utilitzen cadascun dels seus elements.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> declaració DTD
2. <html> inici xhtml
3. <head> inici capçalera del document
4. <title>xhtml vàdid</title> etiqueta obligatòria dins de l'element head
5. </head>
6. <body> inici cos del contingut
7. </body> final del cos del contingut
8. </html> final xhtml
1. És la declaració DTD o doctype del tipus de document que és. És essencial per al navegador
saber de quin tipus de document es tracta i perquè el document validi.
2. Inici de l'etiqueta <html> .És l'element que inclou tot el document
3. Inici de l'etiqueta <head>
4. Etiqueta <title>és l'única etiqueta obligatòria dins de l'element head. Serveix per a donar
títol a un document.
5. Final de l'etiqueta head
6. Inici de l'etiqueta <body>. Dins dels tags <body></body> és on hi haurà tot el contingut del
document a mostrar.
7. Final de l'etiqueta </body>
8. Final de l'etiqueta </ html>
Investigació. En aquests moments s'està elaborant l'estàndard HTML5. Busca informació en la web sobre l'estat d'aquest projecte i les principals diferències que suposarà HTML5 quant al marcat dels documents. Fes-ne un informe d’aproximadament 500 paraules. És essencial que citis les fonts d'informació que has utilitzat.
Primer de tot voldria aportar un enllaç de la pàgina oficial de la W3C on ens mostra el nivell de compatibilitat de diferents navegadors al HTML5 (en aquest cas i no se per quin motiu falta Safari).| Feature | Internet Explorer 9 Platform Preview 6 | Chromium 9.0.571.0 (64851) | Firefox 4.0b8pre | Opera 11.00 alpha (build 1029) | WebKit Nightly Build r70732 |
| attributes | 100% | 100% | 100% | 100% | 100% |
| audio | 100% | 100% | 100% | 100% | 100% |
| canvas | 89.55% | 93.08% | 75.47% | 85.35% | 94.34% |
| getelementsbyclassname | 83.33% | 100% | 100% | 94.44% | 100% |
| foreigncontent | 100% | 100% | 100% | 0% | 100% |
| video | 100% | 85.71% | 78.57% | 78.57% | 85.71% |
| xhtml5 | 100% | 42.86% | 85.71% | 100% | 42.86% |
Com podem veure en l'actualitat i en general ja hi ha un nivell bastant elevat de compatibilitat bastant elevat amb l'HTML5 entre els diferents navegadors.
Principals diferències entre HTML4 i HTML5:
Declaració DTD
Fins ara havíem de fer una declaració semblant a aquesta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
amb l'html5 es reduirà a:
<!DOCTYPE html> o <!DOCTYPE html SYSTEM "about:legacy-compat">
Alguns nous elements estructurals:
- section: Serà un encapçalament, secció, capítol, etc..
- header: La capçalera de la pàgina
- footer: El peu de la pàgina
- nav: La navegació de la web
- article: Per marcar una entrada exterior cap a un article, blog,..
- video i audio: per incloure contingut d'audio i de vídeo amb atributs "preload" per a precarga del vídeo i "controls" d'interfície per a controlar la reproducció.
- canvas: per incloure gràfics dinàmicament. Ës controla amb javascript..exemple:<canvas id="control" width="300" height="200"></canvas> La id ens serveix per poder fer referència a ell des dejavascript.
- aside: per incloure blocs semàntics que representin una nota, consell, explicació,..
- figure: s'utilitzarà per representar una imatge.
- figcaption: per donar un títol i autor a les imatges.
- dialog: s'utilitzarà per representar el diàleg entre dues persones.
- mark: per ressaltar una paraula.
- time: s'utilitzarà per assenyalar un moment temporal.
- del: per marcar text que ha estat eliminat.
- menu: será un llistat, menú.
- summary: el tag contindrà els detalls del document.
- details: més detalls sobre alguna cosa.
- progress: per a mostrar barra d'informació del progrés del temps en una tasca.
Auto validació de formularis sense utilitzar javascript amb la utilització de 13 nous aributs de type de l'etiqueta <input>.
Alguns d'ells: email, date, month, week, url
i també atribut pattern que ens permet fer les nostres expressions regulars sense utilitzar javascript o
atribut autofocus per posar el focus automàticament i required per dir si un camp és requerit i placeholder per fer una marca de aigua com exemple dins dels camps de formularis, que quan escrivim desapareixen.
BBDD de navegador:
Capacitat per crear i fer consultes en bases de dades d'usuari (navegador).
Bibliografia:
http://test.w3.org/html/tests/reporting/report.htmhttp://dev.w3.org/html5/spec/Overview.html
http://ca.wikipedia.org/wiki/HTML_5
http://www.w3schools.com/html5/html5_reference.asp
Digues si són correctes o incorrectes els següents fragments de codi (en XHTML). En cas que siguin incorrectes, indica per què.
<strong>Text negreta i <i>cursiva</strong></i> Incorrecte. Per una part <strong> tan sols està permès dins d'algun element en bloc com: p, div, etc.. i per altre part l'etiqueta <i> està mal imbricada i també s'hauria de fer ús de l'etiqueta <em> per emfatitzar, ja que <i> està desaprovat.<h7>Títol</h7> Incorrecte. L'etiqueta <h7> no existeix, els encapçalaments h tan sols arriben fins <h6>.
<h1><strong>Un altre títol</strong></h1> Correcte.
<h2><p>I encara un altre títol</p> <p>Amb el seu subtítol</p></h2> Incorrecte. L'etiqueta <p> no està permesa dins dels elements <h1>, <h2>, etc..
<em class=enverd>Text en color verd</em> (Suposant que existeix una classe enverd en el CSS)<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> Incorrecte. La llista numerada està mal imbricada. S'hauria d'imbricar de la següent
manera:
<ul>
<li>Primera entrada
<ul>
<li>Primera subentrada</li>
<li>Segona subentrada</li>
<li>Tercera subentrada</li>
</li>
</ul>
<ol>
<li>Segona entrada</li>
<li>Primera subentrada</li>
<li>Segona subentrada</li>
<li>Tercera subentrada</li></ol>
</ul>
o sigui moure el <ol> després del tancament de la llista desordenada </ul>.
De quines formes es poden especificar la grandària del text usant CSS? Quins són les diferències entre elles? I els avantatges i inconvenients de cadascuna d'elles?
px (píxels), pts (punts), em (ample de la lletra M), % (porcentatge), i paraules clau (xx-small, xsmall, small, medium, large, x-large, i xx-large).Per una part tenim les mides absolutes: pixel, pt (són les més precises i la millor opció quant tenim una composició a tamany fixe) (els pt s'utlitzen només per a impressió).
Les mides relatives: em o % . Es la millor opció en composicions de tamany relatiu. Les em són l'ample de la lletra M que és la lletra més ampla. Si no s'ha declarat cap tamany en cap lloc el em serà el tamany per defecte del navegador, que normalment és 16px, per el qual 1em=16px. Si declares en el css en el body el tamany de font de 20px llavors 1em=20px.. Les mides en % funcionen més o menys com els em. Si declarem en el body 20px i llavors per els div 50%, voldrà dir que com que el pare té un tamany de 20px, el fill en aquest cas el div tindrà un tamany de 10px.
Les mides de paraules clau (xx-small, x-small, small, medium, large, x-large, i xx-large): Són la millor opció quan la usabilitat del lloc sigui el més important i funciones declaran aquestes propietats en l'element que vulguem. Una de les aplicacions més clàssiques és declarar un tamany de font clau en el body i després declarar un tamany relatiu per a la resta d'elements, fent així que poguem controlar el tamany de la font d'una manera senzilla i aconseguir que un lloc web augmenti o disminueixi de tamany uniformement.
Posa un exemple de pàgina web no accessible (desafortunadament, són fàcils de trobar) i explica alguns dels motius pels quals no ho és.
http://www.guiamanresa.com/- El xhtml no valida
- El CSS no valida tampoc
Si faig servir l'eina http://www.tawdis.net/ per un nivell d'analisis WCAG 1,0 em surten :
- 47 errors de prioritat 1 Automàtic
- 444 errors de prioritat 1 Manual
- 1180 errors de prioritat 2 Automàtic
- 859 errors de prioritat 2 Manual
Principals errors d'accesibilitat:
- El text alternatiu per les imatges del menú no existeix, o és massa poc descriptiu.
- Poc contrast entre les imatges del menú i el fons, fet que pot donar confusió al les persones amb problemes visuals.
- No existeix contingut alternatiu per al cos de l'element iframe.
- Contingut dinàmic (banners) no accesibles i sense alternativa de text.
- Enllaços que s'obren en una finestra nova cosa que pot desorientar al usuari.
- Maquetació en tables.
- Semanticament poc estructurada o gens estructurada (no fa sevir encapçalaments, ni llistes, etc..)
Observeu la següent captura de pantalla:
Volem aconseguir el següent resultat: les imatges hauran de quedar envoltades d’un marge de color gris de dos píxels de gruix i, a més, volem assegurar-nos que hi hagi almenys cinc píxels de separació amb qualsevol element que les envolti, i aquests píxels hauran de mostrar el color del fons. Quin codi CSS cal utilitzar? Indicació: consulteu el model de caixes.
Marcat HTML:<div id="content">
<div id="right">
<h1>Títol1</h1>
<p>orem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum
liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi
lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte
definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine
equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>
</div>
<div id="left">
<img src="img1.jpg"/>
</div>
<div id="separacio"></div>
</div> <!-- FINAL DEL CONTENT -->
<div id="content">
<div id="right">
<h1>Títol2</h1>
<p>orem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum
liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi
lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte
definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine
equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>
</div>
<div id="left">
<img src="img1.jpg"/>
</div>
<div id="separacio"></div>
</div> <!-- FINAL DEL CONTENT -->
CSS:
#content{ width:750px; padding:0px; margin:0px auto; text-align:left}
#left{width:250px;float:left;}
#left img{ border:2px solid #666; margin:10px; }
#right{ width:500px;float:right; clear:right }
#separacio{width:100%; clear:both; border-bottom:1px solid #999}
Cap comentari:
Publica un comentari a l'entrada