More like this

STID

by Angelina Sancerni

PAC1 Disseny de recursos i activitats en línia aula 1 vdef

by Elisenda Iglesias

ESTÀNDARDS WEB

by Gil Ramon

Unitat didàctica 3. Designing web navigation.

by Gemma Ortís

Arquitectura de la informació 1: Edició amb estàndars web: HTML i CSS. W3C i Accessibilitat.

Accessibilitat

Eines

INTAV

(INTECO Accessibility Validator) fa la mateixa funció que els altres dos però basant-se en la normativa vigent i estandards com la UNE i la WCAG.

HERA

Fa una funció semblant al TAW, seguint les recomanacions de les WCAG 1.0 (Directrius d'Accessibilitat per al Contingut Web 1.0). També realitza un anàlisis automàtic previ i avisa dels errors.

TAW

(Test d'accessibilitat Web) és una eina desenvolupada per la Funació CTIC que permet evaluar alguns aspectes de la pàgina web de manera automàtica.

Ajudes tècniques

Magnificador de pantalla, que amplia el contingut del monitor per a persones de visió reduïda

Dispositiu hardware que converteix el text en caràcter Braille

Lector de pantalla amb síntesi de veu

Limitacions

Cognitives (dislexia, discalculia, TDA...)

Auditives (sordera...)

Motrius (Parkinson, lentitud muscular, distrofia, paràlisis cerebral, amputacions...)

Visuals (baixa visió, ceguera total, daltonisme...)

W3C

Estàndards web

Són un conjunt de recomanacions donades per l'W3C i les altres organitzacions adderides sobre com crear i interpretar documents de Web. Són aquelles tecnologies disponibles per als creadors de pàgines web per assegurar-se de la vigència d¡allò que es publicarà.

Estructuració del disseny

Disseny

Contingut

Format del document

Beneficis

Complir els requriments d'accessibilitat

Menys costos de producció i manteniment

Més accessibles per a discapacitats.

El contingut en XHTML pot ser processat de moltes maneres i permet la creació de llocs extensibles.

Els documents en base XHTML tenen més bona posició ens els motors de cerca.

XHTML i CSS utilitzen menys codi i es mostren més depressa a l'usuari, ja que no utilotzen tant espai de banda.

XHTML i CSS donen bona aparença i facilitat a l'hora de produir canvis, ja que es poden configurar per separat.

Més consistència visual.

World Wide Web Consortium

És un consorci internacional que estableix les normes i dóna recomanacions per a editar pàgines en HTML. La dirigeix Tim Berners-Lee, creador de URL, HTTP i HTML, les principals tecnologies en què es basa la Web.

Va ser creada l'1 d'octubre de 1994 pel mateix Berners-Lee. Està integrada per altres empreses de França i Japó, entre altres.

CSS (presentació)

Propietats

Podem escollir color i mida de les línies horitzontals.

Es pot variar l'aspecte d'un enllaç quan el cursos hi passa per damunt.

Podem aplicar una propietat a diverses etiquetes.

Podem escollir tamany de font, tipus (fins i tot una segona opció), i deixar marges a dreta i escquerra.

Extern

Es crea un document a part i es vincula des de cada pàgina afectada en el ="fitxer_estil.css" />

Intern

Ho escriurem dins de l'apartat de i s'aplicarà a tota la pàgina

En línia

Escriurem la informació dins de cada etiqueta

text

Cascading Style Sheets

És la manera de controlar l'estil de la nostra pàgina web, és a dir, el seu aspecte, com es veurà quan algú hi entri.

Podem indicar, per exemple, com es veurà la infromació per pantalla normal, per mòbil, per imprimir, etc.

HTML (contingut)

Etiquetes HTML

Formularis

Aquest tipus d'etiqueta és una mica més complicada que les altres. Explicarem només que podem aconseguir, per exemple, fer un formulari per omplir perquè s'envïi un mail i algú perquè es posi en contacte amb nosaltres. Seria encara una mica més difícil fer un formulari per a elaborar una estadística, ja que radera de tot hi hauria d'haver un buidatge de respostes.

Taules

Subtema

Columna com encapçalament

Fila

Llistes

No numerades

Numerades

Metaelements

Van situats a la secció de i descriuen la pàgina perquè el servidor la pugui trobar quan es fa una cerca. Podem dir autor, data, temàtica, paraules clau...

Enllaç

'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.

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 una altra pàgina web enllaç

A una altra carpeta que està dins de la que conté l'HTM enllaç

A una altra carpeta del mateix nivell enllaç

A un arxiu dins del amteix directori enllaç

Inclusió d'objectes

So i vídeo

Imatges

En aquesta etiqueta li estem donant un títol a la foto, que és el que ens apareix en una capseta quan deixem el cursor al damunt, i també el text alternatiu en cas que la fotografia no es carregui (alt).

Emmagatzemades independentment dels textos

Format de text

També ho podem escriure tot dins la amteixa etiqueta

Lletra de tipus 'n' (es refereix a si és Comic Sans, Times New Roman, Arial, etc.)

Lletra de color 'n'

Lletra de mida 'n'

Lletra cursiva

Lletra en negreta (també podem utilitzar "strong")

Format de document

Encapçalaments

...

Salt de línia

Salt de paràgraf

Estructura d'un document HTML

Es visualitza a la pantalla.

No es visualitza a la pantalla.

Full d'estil, en aquest cas incrustat a la pàgina. (També pot anar a part i linkat a la pàgina).

Declaració tècnica del document (DOCTYPE)

(declaració de la llengua per ser reconegut universalment)

(el més normal)

Llenguatge de Marcat d'Hipertext

És un llenguatge que ens permet crear la informació que més endavant llegirà Internet per interpretar la nostra pàgina web. L'etiquetatge permet que cada cosa estigui al seu lloc i tingui unes característiques concretes al gust de cada creador.