Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita Ribas

PAC1 - Correcció
P1.- (5 punts) Quines versions d'HTML, XHTML i CSS
hem d'usar 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ʼobtenia
el punt que faltava.

En cas de comentar les versions css3, html 5, etc.. es podia obtenir un punt extra.(anulant
algun error anterior)

P2.- (10 punts) Enumera les diferents formes d'usar
CSS en una pàgina web. Per què és, en general, una
pràctica dolenta embeure els estils dins de l'HTML? Se
t'acut algun cas en el qual pugui ser una bona idea?
Amb anomenar i explicar les diferents formes 4 punts:

-Full d'estils extern:
Consisteix en un arxiu vinculat al document HTML. Ha d'estar al <head> del
document i serà vàlid per tota la web.
Podem vincular-ho al document mitjançant l'element <link> o @import.
- <link rel="stylesheet" href="styles.css" type="text/css"
media="screen">
(href apunta l'arxiu CSS, media deﬁneix 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 l'element <style>, situat al <head> del document, declarem les regles d'estil,
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 d'aplicar estils a l'element que ho necessita directament al <body> del
document, mitjançant l'element <style>. És una pràctica dolenta perquè estarem
barrejant contingut amb presentació.
<p style="background:blue; color:white; padding:5px;">Text</p>

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 ens
permet separar disseny dʼestructura. Ens permet un millor manteniment, ja que podem
trobar amb facilitat els errors de css comesos.

P2.2 - Principalment ens pot interesar si volem invalidar un css que estigui declarat a un
nivell superior i que no puguem invalidar de cap altre manera. També ens pot servir en
ocasions especials com en creacions de newsletters (Però aquesta es una altre història).

P3.- (5 punts) Quins elements poden aparèixer dins de
l'element <head>?
Title
meta
style / link
script

base: com a punt extra.

(Explicats com és degut.)

P4.- (10 punts) Quines diferències hi ha entre una
classe 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 10
punts.

P5.- (15 punts) 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.

L'estructura bàsica d'un 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 als
navegadors la manera de mostrar correctament el document.
<html> … </html>
Tot el contingut de la pàgina web anirà escrit dins aquest element. L'etiqueta de
tancament és l'últim que es veurà al nostre codi. Dins d'aquest, per tant, anirà el
<head> I el <body>.
Com estem construint una web amb llenguatge XHTML, aquest necessita una
declaració xmlns, que la colocarem dins l'etiqueta d'obertura 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 la
informació adicional del document. No serà visible pels usuaris.
Dins d'aquest colocarem el <title> … </title>, que és un dels elements més important
del head. És el primer que veuran els usuaris. Es veurà el text que hem escrit a la
barra superior del navegador.
Sense aquest <title> la pàgina també validarà, però ho he inclós perqué ho considero
un element molt important.
<body> … </body>
Aquí és on colocarem tot el contingut real de la pàgina, que serà visible per tots els
usuaris.

P6.- (15 punts) 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.
Quasevol argumentació correcte i coherent donava els 15 punts.

P7.- (10 punts) Digues si són correctes o incorrectes els
següents fragments de codi (en XHTML). En cas que
siguin 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 signiﬁcat 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 strong
com element presentacional i no semàntic. Si sʼhavia de canviar lʼestil del contingut era
mitjançant css. A part sʼha de tindre en compte altre cop el signiﬁcat semàntic dʼstrong
vers 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 per
cada 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 un
altre 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>Tercera subentrada</li></ol>
</ul>

Llistes mal imbrincades, tant la primera com la segona entrada.

<ul>
<li>Primera entrada

<ul>

<li>Primera subentrada</li>


<li>Tercera subentrada</li>

</ul>
</li>
<li>Segona entrada

<ol>

<li>Primera subentrada</li>


<li>Tercera subentrada</li>

</ol>
</li>
</ul>

P8.- (10 punts) 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?
Amb lʼexplicació de les diferents propietats de font-size, les diferències dʼaquestes i les
avantatges i inconvenients nʼera més que suficient.

Tipus d'unitats: - 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 es
posa em)
- Paraula clau: Quan la usabilitat sigui més important que el disseny.

P9.- (10 punts) 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.
Amb posar un exemple real i veure que realment havieu identificat les mancançes
sʼobtenien els 10 punts.

Sempre i quant estigués ben argumentat.

P10.- (10 punts) Observeu la següent captura de
pantalla:

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 donat
per bona.

Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita Ribas

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (9)

En vedette

En vedette (16)

Similaire à Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita Ribas

Similaire à Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita Ribas (20)

Plus de Paquita Ribas

Plus de Paquita Ribas (20)

Dernier

Dernier (8)

Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita Ribas