Primera pàgina. Utilització de llistes de definicions.

Nom del fitxer: respostes.html

Utilitzant llistes de definicions has de donar resposta a les següents preguntes:

Volem presentar en una pàgina web una llista ordenada que és la continuació d'una altra llista que començava en una pàgina diferent. Com podem fer que la numeració continuï la de la llista prèvia? Posa'n un exemple.

<ol> <li>És important que l'ajust calòric de la dieta sigui l'adequat, pesar els aliments.</li> <li>El pes que s'indica és sense desaprofitaments (greix, os, espines, peles).</li> <li> Cuini els aliments de forma senzilla </li> </ol>

<p class=“note”>Factors molt importants i a tindre en conter hem dit avanç com són. La forma tant la de cuinar o pesar el menjar. Ja que una incorrecta mesura en el pes o en el tipus de cuinar pot tirar per terra la pèrdua de pes. </p>

<ol start=“4”> <li>Per l'amaneixo es poden utilitzar lliurement: herbes aromàtiques</li> <li>Com a edulcorant artificial s'empraran sacarina i similars.</li> <li> Begudes "*light" No és aconsellable prendre més d'una </li> <li>No s'ha de prendre begudes alcohòliques</li> </ol>

Quina diferència hi ha entre utilitzar en l'atribut: href d'un enllaç rutes absolutes, rutes absolutes a l'arrel del lloc o rutes relatives a la carpeta actual?

L'atribut més habitual que utilitzarem es el href: el recurs cap al qual apunta (ja sigui un arxiu extern o un ID d'àncora).

En una ruta absoluta podem utilitzar aquesta ruta per cridar a la imatge des de qualsevol lloc (ja s'en el nostre domini o en un altre).

Una ruta relativa s'utilitzara més per a fer cridaes a rutes que es troben dins del nostre domini.

Una ruta absoluta per a cridar elements que formen part del nostre domini (imatges, enllaç, llistes,etc.). No pot funcionar correctament, ja que canvia si estem en local o al servidor web l'adreça.

Per això la utilització de les rutes relatives i una altra que pareix que no però l'arrel del lloc la probabilitat d'error de sintaxis augmenta encara que no sigui important a nivell de comprensió lògica.

Si treballem en rutes relatives caldra tindre en conter si nosaltres estem en el directori principal i volem inserir la foto des del “index” la ruta relativa DES DEL index seria: (images/elmeugos.jpg)

Ara suposem que estem dins d'una categoria anomenada "articulos" i volem insertar la foto, la rutarelativa DES D'aquest punt seria:(../images/elmeugos.jpg)

Els dos punts abans de la barra (../) significa un pas cap a enrere, perquè tenim que sortir de la carpeta "articulos" i entrar a la carpeta "images" on está la foto.

Quines són les més habituals i per què?

Dependrà de l'enllaç a utilitzar si es un hipervincle cap a un altra pàgina web serà una ruta absoluta. Si es una imatge que tinguem al nostre domini s'utilitzara una ruta relativa

Posa un exemple de cadascuna d'elles.

Src = Aquest atribut és obligatori i indica el nom de l'arxiu d'imatge (entre cometes) o la URL que es va a representar.

Una ruta absoluta

http://www.exemple.com/respostes.html

Una ruta relativa en una adreça que esta al mateix nivell

"respostes.html"

<img src="imatge1.png" alt="Logotip d'empresa" height="50" width="50">

Una ruta relativa a un nivell superior a la carpeta “images”

<img src="../imatge1.png" alt="Logotip d'empresa" height="50" width="50">

Una ruta relativa a un nivell inferior a la carpeta “images”

<img src="images/imatge1.png" alt="Logotip d'empresa" height="50" width="50">

En què consisteix el mode "quirks" dels navegadors?

"Quirks mode fa referència a una tècnica usada per alguns navegadors per mantenir la retro-compatibilitat amb pàgines web dissenyades per a navegadors més antics" (font: "Wikipedia")

Les implementacions de CSS en navegadors web,va donar lloc a errors en pàgines que no es van sotmetre a les especificacions requerides per aquests llenguatges. Donant lloc comportaments i presentacions incorrectes. aquest comportament s'anomena "Quirks".

Quines diferències presenta amb el mode estàndard?

En manera estàndard les pàgines són dibuixades d'acord amb les especificacions d'HTML i CSS, mentre que en la manera "quirks" tracten d'emular el comportament dels navegadors vells per assegurar que aquestes pàgines es representin d'acord a la intenció original dels seus autors cosaque moltes vegades no es sembla a la realitat.

També, els navegadors determinen com manera usar basant-se en el DOCTYPE la pàgina; si hi ha una declaració completa de DOCTYPE present, el navegador usa la manera estàndard i si aquesta està absent el navegador utilitza la manera "quirks".

Per exemple una pàgina web que comenci amb el següent *DOCTYPE *dispararìa la manera estàndard:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">

Mentre que aquest DOCTYPE el qual no conté ni la versió d'HTML usada, dispararia la manera "quirks"

<!DOCTYPE html PUBLIC>

A més,una pàgina que no inclogui un DOCTYPE serà dibuixada en manera "quirks".Quan i com hem de tenir en compte l'accessibilitat a les pàgines web que dissenyem?

Des del començament de creacio d’aquesta (web), tindrem en compte de què sigui accesible. Ja que una volta realitzada la tasca és més complexa. Si a l’hora de desenvolupar una pàgina web ens apliquem criteris de accessibilitat, apart de facilitar l’accés a persones amb alguna discapacitat el que aconseguim son beneficis tant econòmics com socials, ja que podem arribar a més gent i mes els motors de búsqueda solen utilizar els mateixos críteris per a buscar per tant a l’hora de posicionar será molt més fácil.

Indica algunes característiques que ha de tenir una pàgina accessible i il·lustra-les mitjançant exemples.

Tenim a un mateix nivel en següent contingutdisposem de les pàgines ”respostes.html” i “respostes2.html”

una imatge de nom ”continguts_de_respostes1.png”

<UL> <li><A href=”respostes.html”> enllaç a respostes </A></li> <li><IMG src=” continguts_de_respostes1.png” alt=”Una imagen bonita”></li> <li><A href=”respostes2.html”>enllaç a respostes2 </A></li> </UL>

Un altre exemple seria la identificació clara de qualsevol canvi d'idioma que es pugui produir en el text d'un document.

<p> <q>Buenos días Philip</q> <q lang=”en”>Good morning</q>. Respondió Philip en inglés. <q>¿Qué tal estás?</q> <q lang=”fr”>Très bien.</q> Volvió a responder, pero en francés.

</p>

Al colocar una imatge l’atribut “alt” descriu la nostra imatge

<img src="/images/ninot1.jpg" width=340 height=210 alt="un ninot de falla">

El que no deuria de tindre una web amb accesibilidad deuria de ser:- Imatges sense text alternatiu;- Absència de text alternatiu per als punts sensibles dels mapes d’imatge;- Elements multimèdia sense alternatives de text;- Absència d’informació alternativa per als usuaris que no poden accedir als marcs (*frames) o als programes integrats com Javascript o Flash;- Llocs amb un contrast baix entre el color de text i fons, o fons complexos que dificulten la lectura- Llocs massa complexos per trobar la informació rellevant

Com s'especifica l'amplada i l'alçada d'un element HTML?

WIDTH= Aquest atribut ajuda al navegador a representar la imatge, significa l'ample de la imatge que anem a representar.

HEIGHT=Igual que l'atribut WIDTH, aquest representa l'alt de la imatge.

Posa exemples per acompanyar les teves explicacions.

<img src="/images/ninot1.jpg" width=340 height=210 alt="un ninot de falla">

Segona pàgina. Utilització de llistes ordenades i no ordenades i enllaços.Nom del fitxer: series.html

Has de reproduir l'estructura de la llista que veus a l'arxiu series.jpg. Per copiar i enganxar

còmodament el text, adjuntem també l'arxiu series.rtf.

L'aspecte del llistat resultant ha de semblar-se al model. Les imatges necessàries per canviar els pics per defecte d'algunes de les llistes s'adjunten amb aquest enunciat (vermell.gif, verd.gif, blau.gif).

S'ha de poder enllaçar amb les diverses webs de les sèries que s'esmenten; trobaràs els enllaços a l'arxiu url_series.rtf.

Cal modificar l'aspecte per defecte amb el qual el navegador mostra els enllaços. Per defecte seran de color negre. Quan l'usuari passi el punter del ratolí per sobre de l'enllaç, elcolor del text canviarà a verd amb subratllat de línia discontínua.

Tercera pàgina. El model de caixa, imatges, llistes i enllaços.Nom del fitxer: big_data.html

Ha de reproduir-se amb la màxima fidelitat possible el document que presentem a l'arxiu big_data.jpg. Per copiar i enganxar còmodament el text, adjuntem també l'arxiu big_data.rtf.

S'adjunten les imatges de l'article.Condicions a tenir consideració per a la maquetació del document:

Mida i colors de la lletra: cal fer els canvis de color i mida de cada part del document, imitant les proporcions del model.

Alineaments: s'han de respectar els alineaments del text.

Elements semàntics: han de marcar convenientment les cites, abreviatures, paraules en idioma diferent al del document, etc i, si cal, modificar el format que presenten per defecte.

Imatges: s'ha de considerar la manera més convenient de presentar les imatges en el document en funció del seu valor. Cal tenir en compte també el seu posicionament.

Composició: no cal que l'amplada del text en pantalla tingui exactament la mateixa mesura que ladel model, si bé s'ha d'aconseguir que sigui llegible i que l'article aparegui centrat en la finestra delnavegador.

Caixes especials: s'ha d'aconseguir que les caixes que contenen les imatges, així com les del títol i el peu de pàgina, tinguin amplades, marges, farcits i vores que les facin semblants al document model.