Arquitectura de la informació 1: Edició amb estàndars web: HTML i CSS. W3C i Accessibilitat.
HTML (contingut)
Llenguatge de Marcat d'Hipertext
Declaració tècnica del document (DOCTYPE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; (el més normal)
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="es" lang="es"> (declaració de la llengua per ser reconegut universalment)
Estructura d'un document HTML
<html>
<head></head>
<title>...</title>
<style type="txt/css"></style>
<body></body>
</html>
Etiquetes HTML
Format de document
<p> Salt de paràgraf </p>
<br> Salt de línia </br>
<hr> Línia horitzontal </hr>
Encapçalaments <h1> <h2> <h3> ...
Format de text
<bold> Lletra en negreta </bold> (també podem utilitzar "strong")
<em> Lletra cursiva </em>
<font size="n"> Lletra de mida 'n' </font>
<font color="n"> Lletra de color 'n' </font>
<font face="n"> Lletra de tipus 'n' </font> (es refereix a si és Comic Sans, Times New Roman, Arial, etc.)
També ho podem escriure tot dins la amteixa etiqueta
Inclusió d'objectes
Imatges
Emmagatzemades independentment dels textos
<img src="imatge.jpg">
<img src="File:/C:/carpeta/imatge.jpg">
<img src="http://www.imatges.com/imatge.jpg">;
<img src="imatges/imatge.jpg" alt="Foto" title="Foto">
So i vídeo
<embed>
Enllaç
A un arxiu dins del amteix directori <a href="destí.htm">enllaç</a>
A una altra carpeta del mateix nivell <a href=".../carpeta2/destí.htm">enllaç</a>
A una altra carpeta que està dins de la que conté l'HTM <a href="/carpeta1-1/destí.htm">enllaç</a>
A una altra pàgina web <a href="http:/www.destí.com">enllaç</a>
També podem triar si volem que aquest enllaç s'obri a la mateixa pàgina o si se n'obrirà una altra de nova a part <a href="..." target="_self" o "_blank">...</a>
'Mailto' Podem enllaçar una adreça de correu a un nom, cosa que farà que s'obri una pàgina de correu electrònic amb el mail de la persona a punt per enviar.
Metaelements
Van situats a la secció de <head> i descriuen la pàgina perquè el servidor la pugui trobar quan es fa una cerca. Podem dir autor, data, temàtica, paraules clau...
Llistes
Numerades
<ol>
<li>Un</li>
<li>Dos</li>
<li>...</li>
</ol>
No numerades
<ul>
<li>Un</li>
<li>Dos</li>
<li>...</li>
</ul>
Taules
<tr> Fila
<th> Columna com encapçalament
Subtema
Formularis
CSS (presentació)
Cascading Style Sheets
En línia
Escriurem la informació dins de cada etiqueta <h2 style="font-size:14;"> text </h2>
Intern
Ho escriurem dins de l'apartat de <head> i s'aplicarà a tota la pàgina <style type="text/css">
body {background-color:#ccdd00;}
h2 {font-size:14;}
</stle>
Extern
Es crea un document a part i es vincula des de cada pàgina afectada en el <head>
<head>
<link rel=stylesheet" type="text/css" href>="fitxer_estil.css" />
</head>
Propietats
Podem escollir tamany de font, tipus (fins i tot una segona opció), i deixar marges a dreta i escquerra.
Podem aplicar una propietat a diverses etiquetes.
Es pot variar l'aspecte d'un enllaç quan el cursos hi passa per damunt.
Podem escollir color i mida de les línies horitzontals.
W3C
World Wide Web Consortium
Estàndards web
Beneficis
Més consistència visual.
XHTML i CSS donen bona aparença i facilitat a l'hora de produir canvis, ja que es poden configurar per separat.
XHTML i CSS utilitzen menys codi i es mostren més depressa a l'usuari, ja que no utilotzen tant espai de banda.
Els documents en base XHTML tenen més bona posició ens els motors de cerca.
El contingut en XHTML pot ser processat de moltes maneres i permet la creació de llocs extensibles.
Més accessibles per a discapacitats.
Menys costos de producció i manteniment
Complir els requriments d'accessibilitat
Estructuració del disseny
Format del document
Contingut
Disseny
Accessibilitat
Limitacions
Visuals (baixa visió, ceguera total, daltonisme...)
Motrius (Parkinson, lentitud muscular, distrofia, paràlisis cerebral, amputacions...)
Auditives (sordera...)
Cognitives (dislexia, discalculia, TDA...)
Ajudes tècniques
Lector de pantalla amb síntesi de veu
Dispositiu hardware que converteix el text en caràcter Braille
Magnificador de pantalla, que amplia el contingut del monitor per a persones de visió reduïda
Eines
TAW
HERA
INTAV