Trabajo de Estándares Web

“AÑO DE LA DIVERSIFICACIÓN PRODUCTIVA Y

DEL FORTALECIMIENTO DE LA EDUCACIÓN”

ALUMNO:

NEIRA MANCHAY JUAN CARLOS

CURSO:

PROGRAMCIÓN MULTIMEDIA

TEMA:

ESTÁNDARES Y ACCESIBILIDAD WEB

PROFESOR:

RIVES

ESCUELA PROFESIONAL:

INGENIERÍA INFORMÁTICA

SEMESTRE:

2015-II

2015

ESTÁNDARES Y ACCESIBILIDAD WEB

Con la finalidad de hacer uso de mejores prácticas para construir sitios web se han

incluido muchos métodos y reglas normalizadas para el correcto desarrollo en

implementación de estos servicios así como su administración. Desde los primeros

bocetos de diseño, la accesibilidad y la estandarización ha de ser tenida en cuenta, por

las consecuencias críticas que puede suponer su falta de implementación en cualquiera

de las fases del desarrollo de un documento (no ya todo un sitio)

La estandarización y la accesibilidad no son un obstáculo añadido a las presiones y

problemas del trabajo diario, sino una herramienta para solucionar errores arrastrados de

la época en la que teníamos que lidiar con las inconsistentes implementaciones de los

estándares en años pasados.

Lo que se presenta en este curso relámpago es la versión corregida y ligeramente

aumentada de los apuntes que empleé en la clase. Suponen un buen punto de partida

para aquel que quiera desarrollar sitios web basándose en los estándares actuales y con

la accesibilidad de sus contenidos como uno de los objetivos iniciales.

El SGML

El concepto de lenguaje de marcado, un método de añadir por medio de etiquetas

genéricas información al contenido de un documento. Uno de los padres de este

concepto, Charles Goldfarb inventó en 1969 el primer lenguaje de marcado junto a sus

compañeros Edward Mosher y Raymond Lorie del Almaden Research Center de IBM:

GML. Además de coincidir con las iniciales de sus apellidos, GML significa

Generalized Markup Language, Lenguaje de Marcado Generalizado, y además de la

idea de marcar textos con etiquetas añadía dos conceptos importantes: la definición

formal del tipo de documento, y la estructura de elementos anidados.

Posteriormente, en 1978, el ANSI creó un comité de Lenguajes de Ordenador para

Procesado de Texto —Computer Languages for the Processing of Text—, para

desarrollar como un estándar GML, y en 1980 publicaron un borrador de SGML,

Standard Generalized Markup Language, Lenguaje Estándar de Marcado Generalizado,

y en 1986 ya se aprobó como ISO 8879.

Así, SGML se convertía en un lenguaje para marcar textos para medios electrónicos, y

que podía restringirse para generar lenguajes específicos para fines específicos. Algunas

de sus aplicaciones más conocidas son PostScript o RTF, pero sobre todo HTML.

HTML

Cuando Tim Berners-Lee desarrolló el funcionamiento de Internet, desarrolló

paralelamente el lenguaje con el que habrían de ser marcados los documentos

científicos para sus transmisión por la red y para su interpretación en los navegadores.

Así, junto a una comunidad de colaboradores, y en especial junto a Dave Raggett, creó

una aplicación de SGML a la que llamó HyperText Markup Language, Lenguaje de

Marcado de HiperTexto, y cuya especificación de HTML (inglés) es de noviembre de

1992, donde se recogían los elementos básicos para el marcado de textos.

A esta especificación siguieron otras:

HTML 2.0 (inglés)

https://es.wikipedia.org/wiki/Mejores_pr%C3%A1cticas

https://es.wikipedia.org/wiki/Sitio_web

HTML 3.0 (inglés), borrador de 28 de septiembre de 1995, publicado finalmente

como HTML 3.2 (inglés) el 14 de enero de 1997.

HTML 4.0 (inglés), recomendación del 24 de abril de 1998, y actualizada

a HTML 4.01 (inglés), cuya última revisión es del 24 de diciembre de 1999.

Todas estas especificaciones recogen cuestiones sobre definición del tipo de

documento HTML, notas sobre sintaxis y estructura, listas con las definiciones de

elementos y atributos, y otras cuestiones técnicas.

XML

XML es descendiente del propio SGML, creada por Jon Bosak, Tim Bray, C. M.

Sperberg-McQueens, James Clark y otros, que pretendía ser como éste un lenguaje de

marcado general, pero liberado de aquellas características redundantes, difíciles de

implementar, confusas o inútiles, comprobadas después de veite años de su aplicación.

La sintaxis de XML es mucho más estricta que la de SGML, y al igual que éste, puede

especificarse un esquema o una DTD para convertirlo en una aplicación XML. Y eso es

justo lo que nos lleva al último punto de esta introducción, la reformulación de HTML

como una aplicación XML.

XHTML

El W3C pretendía dotar al lenguaje de marcado de documentos web de la consistencia

de XML, y salvarnos del caos de los años noventa. Así, ha desarrollado varias versiones

de XHTML, aunque manteniendo los elementos de HTML para no forzarnos a tener

que aprender un nuevo lenguaje. Veremos esas versiones brevemente más adelante.

Y así, con esta visión general, no parece mala idea aprender algo de XML para

comprender después más profundamente lo que es XHTML. Además, no duele.

La finalidad de XML es marcar información —describir datos— de una forma sencilla e

independiente de la aplicación que requiera esa información. Un mismo XML se podría

utilizar para presentar un contenido en un navegador, importarlo a una base de datos, o

intercambiar información entre diversas aplicaciones.

XML BIEN FORMADO Y XML VÁLIDO

Un documento XML puede estar bien formado y puede que además sea válido.

Un documento XML está bien formado si se aplican las reglas definidas anteriormente.

En caso de que no sea así, el analizador sintáctico de turno generará un mensaje de error

y detendrá el análisis del documento, como puede comprobarse con este ejemplo en un

simple navegador.

Un documento XML es además válido si se ajusta a las limitaciones que le imponga una

DTD, o un esquema:

Una DTD es un documento escrito en un lenguaje creado a partir de SGML, gracias al

cual se pueden especificar nombres de elementos concretos

Un esquema es un documento creado en un lenguaje que sí está basado en XML, y cuya

finalidad es la misma que la de una DTD: especificar restricciones para un documento

XML.

¿XML va a reemplazar al HTML?

En cierto sentido, ya lo ha hecho. XHTML, la tecnología, así se refiere el W3C a los

lenguajes desarrollados en sus especificaciones, que se propone como sustituta

para HTML, está basada en XML; de hecho, es una aplicación XML, lo que no es más

que XML al que se aplica una DTD , o bien un esquema, y un espacio de nombres

concretos , veremos en la siguiente sección del curso lo que significan esos términos.

Pero si la pregunta se refiere a que si se va a sustituir el empleo de

documentos HTML por documentos XML «puros» en la web, la respuesta es que no es

muy probable, puesto que XML se ha concebido como un marcado general para datos, y

no concretamente como un lenguaje de marcado dirigido a la web.

CAPA DE ESTRUCTURA DEL DOCUMENTO

DTD

Una DTD es un documento SGML que incluye las reglas sintácticas para un tipo de

documento específico. Incluye los elementos que se permiten y sus atributos, así como

reglas que afectan a la anidación de los primeros y a los valores de los segundos.

Contrastando un documento con su DTD se puede comprobar si éste es válido o no.

ELEMENTOS Y ATRIBUTOS DE XHTML

ELEMENTOS ESTRUCTURALES

BASE: Especifica la ruta base para todos los URL relativos del documento.

Como Atributos podemos mencionar:

href [obligatorio]: El URL que junto a los vinculos relativos incluidos en un

documento compone los URL absolutos de todos los recursos vinculados.

id: Un identificador.

BODY: Cuerpo del documento donde se encuentra el contenido que se presenta al

usuario visualmente o por otro medio.

Entre sus atributos encontramos:

class: Uno o más identificadores de clase.

dir: Un sentido de lectura.


style: Una o varias declaraciones de CSS.

title: Un texto plano.

xml:lang: Un código de idioma.

HEAD: Cabecera del documento. Contiene información sobre el propio documento

para el agente de usuario.



profile: Un URL.


HTML: Es el elemento raíz del documento XHTML, y no puede tener padre ni

ancestros. Todos los demás elementos deben ir contenidos en él.

Atributos




xmlns [obligatorio]: http://www.w3.org/1999/xhtml [obligatorio]. Es el espacio

de nombres para los elementos de XHTML.

META: Proporciona información adicional sobre un documento, tanto para un proxy

por medio de http-equiv, como para los agentes de usuario por medio de name.

Atributos

content [obligatorio]


http-equiv: Uno de los valores especificados en el protocolo de transferencia de

hipertexto (inglés), y que determina cómo deben tratar los servidores al

documento.


name: Establece la metainformación que se está proporcionando sobre el

documento.

scheme: Una cadena de caracteres que identifica el contexto para los valores de

name.


TITLE: Especifica el título del documento.

Atributos




ELEMENTOS DE VINCULACIÓN

a: Convierte un contenido en un hipervínculo a otro recurso.

Atributos

accesskey: Un caracter que sirve como tecla de acceso rápido.

charset: Un conjunto de caracteres que indica la codificación del recurso al que

se hipervincula.



href: El URL del recurso al que se hipervincula.

hreflang: El código de idioma del recurso al que se hipervincula, si es diferente

al del documento.


rel: Especifica la relación que guarda el documento actual con el documento al

que hipervincula (ver abajo los valores en la nota de link).

rev: Especifica la relación que guarda el documento actual con el documento

desde el que ha sido hipervinculado (ver abajo los valores en la nota de link).


tabindex: Un número natural que indica su posición en el orden de tabulación.


type: El tipo MIME del recurso al que se hipervincula.


Link: Vincula el documento a otro recurso, y especifica la relación existente entre

ambos.

Atributos

charset: Un conjunto de caracteres que indica la codificación del recurso que se

vincula.



href: El URL del recurso al que se hipervincula.

hreflang: El código de idioma del recurso al que se vincula, si es diferente al del

documento.


media: El medio para el que ha sido desarrollado el documento que se vincula.

En el momento en que escribo estos los oficiales son:

all: Apto para todo dispositivo.

braille: Apto para un dispositivo de salida táctil de braille.

embossed: Apto para una impresora braille.

handheld: Apto para un dispositivo de mano, como por ejemplo un teléfono

móvil.

print: Apto para impresión.

projection: Apto para un proyector.

screen: Apto para una pantalla de ordenador.

speech: Apto para un sintetizador de voz.

tty: Apto para un dispositivo de parrilla fija, como por ejemplo un teletipo.

tv: Apto para televisión.

rel: Especifica la relación que guarda el documento actual con el documento al

que vincula.

rev: Especifica la relación que guarda el documento actual con el documento

desde el que ha sido vinculado.



type: El tipo MIME del recurso al que se vincula.


VALIDACIÓN DE UN DOCUMENTO XHTML

La validación, hay que indicar que comúnmente se comete el error de identificar la

validación de un código con su accesibilidad. La validación del código fuente es una

condición necesaria para que una página sea accesible, pero no suficiente. Los

analizadores automáticos pueden comprobar la sintaxis de una página, pero no pueden

juzgar sus elementos semánticos, por lo que se hace necesaria la revisión de las

advertencias , no los errores, que no admiten interpretación, que generan por un ser

humano.

TECNICAS DE ACCESIBILIDAD

A lo largo del tema, he podido observar que estas técnicas están destinadas a satisfacer

las Pautas de Accesibilidad de Contenido Web 1.0 del W3C.

Para el uso adecuado de estas técnicas se hacen uso de Pautas, que son normas para

realizar un modelo de Estandarización correcto, para poder tener acceso al contenido

web.

Entre algunas de las Pautas que puedo resaltar se encuentran:

Estandarizar el código de las páginas.

Aplicar los atributos alt, title y longdesc .

El porqué del uso de estas técnicas, nos permite acceder a un uso más limpio y correcto,

de lo queramos plasmar en nuestro sitio web , para ello utilizaremos recursos como

alternativas auditivas y textuales , para tener un mejor contenido multimedia , sin obviar

que debemos utilizar el lenguaje más claro posible , para que las personas que

interactúen con nuestra web , se sientan cómodos y la forma de navegación sea intuitiva

para ellos.

Entre otros puntos resaltantes, el uso adecuado de las imágenes accesibles es importante

para que el la creación de vínculos, el re direccionamiento hacia otro contenido, o

simplemente mostrar algo concreto e importante.

Es importante resaltar lo que dicen las pautas del W3C , “Proporcione un texto

equivalente para todo elemento no textual , por ejemplo por medio de “alt” “longdesc” ,

o en el contenido del elemento “ , todas estas normas mencionadas para evitar la

opacidad en personas de limitada visión , y la presentación de un buen contenido para el

usuario común.

TABLAS DE CONTENIDOS

Las tablas deben emplearse para marcar autentica información, y no para usarlos

como presentación, en resumen el tipo de tablas usadas son:

Tablas Simples: Con contenido de encabezados de fila y columna.

Tablas Complejas: Con especificaciones en los encabezados tanto de las filas

como de las columnas. Esto se aplica a tablas de dos niveles de “th”. Así

podemos tener una versión válida, y una además accesible:

Tablas más Complejas: En algunos casos, son una serie de tablas simples, este

sería el caso ideal, pero hay casos en los que no es posible. Así podemos

encontrarnos con tablas con encabezados y sub-encabezados.

FORMULARIOS ACCESIBLES

Al igual que las tablas, los formularios son un elemento común de las páginas web, y al

igual que ellas, por lo general se crean de forma automática sin un marcado semántico.

Para que un formulario sea accesible, al igual que con las tablas se debe asociar las

etiquetas de los campos explícitamente a estos mismos por medio de los elementos y

atributos específicos.

Entre la serie de atributos y elementos para hacer accesible el formularios podemos

resaltar los comandos:

-fieldset , legend , name , id , label , textarea , entre otros .

CAPA DE PRESENTACION DEL DOCUMENTO

CSS 2.1

Puesto que la idea básica del W3C era mantener separados el contenido de un

documento y sus elementos estéticos, CSS se desarrolló como un lenguaje destinado a

la aplicación de los atributos de HTML que tenían que ver con el aspecto visual de las

páginas web.

SINTAXIS

Una hoja de estilo básica tiene un aspecto como este:

body{

color:#000;

background-color:#FFF;

font-family:Verdana,Helvetica,sans-serif;

font-size:0.8em;

}

p{

margin:1em;

}

Básicamente, lo que estamos diciendo es que a una parte concreta del documento se le

apliquen unas propiedades definidas.

SELECTORES Y PSEUDOSELECTORES

Como es obvio, para aplicar un estilo a una parte de un documento hay que hacer

referencia a ésta. En las reglas de una hoja de estilo, esta referencia se recoge en el

selector, que son lo elementos, identificadores, clases, o grupos de los anteriores, que

aparecen antes de la apertura de llave que engloba las declaraciones. Técnicamente, hay

dos tipos de selectores:

Selectores propiamente dichos: Hacen referencia a elementos o tributos presentes en el

marcado del documento, como pueden ser un párrafo, el segundo encabezado de una

sección concreta, o una clase llamada destacado.

Pseudoselectores: Hacen referencia a partes de un documento, pero que no existen en

el marcado del mismo, porque dependen del contexto , por ejemplo, la primera línea de

un párrafo dependerá del tamaño de fuente o de la resolución de pantalla— o de la

interacción del usuario —por ejemplo, si ha situado el ratón sobre un botón—. Como

tales, no corresponden a ninguna línea de código XHTML que pueda marcarse.

RELACIÓN DE PROPIEDADES PARA MEDIOS VISUALES

He Recogido en las siguientes listas las propiedades de CSS 2.1.

PROPIEDADES DE CONJUNTO

Algunas de las propiedades en las listas aparecen marcadas como propiedad de

conjunto, lo que significa que se pueden emplear como anotación abreviada de varias

declaraciones.

MEDIDAS

Cuando en los valores de las propiedades hablo de medidas, indico si estas son

absolutas, relativas o porcentuales, pero en todo caso es necesario indicar las unidades

con su abreviatura correspondiente, y sin espacio en blanco entre ésta y el valor; 1em

sería correcto, 1 em no.

Las unidades absolutas son:

Milímetros (mm), Centímetros (cm) y Pulgadas (in).

Puntos (pt): Un punto equivale a 1/72 de una pulgada, lo cual para los que pensamos

según el sistema decimal, casi es como no decir nada; no obstante se define así.

Picas (pc): Una pica equivale a 12 puntos.

Las unidades relativas, a diferencia de las anteriores, dependen de variables como el

tamaño de fuente por defecto del agente de usuario o la resolución de pantalla:

Ems (em): Es la distancia que hay entre las líneas base de dos renglones para una fuente

determinada, siempre y cuando no se haya añadido interlineado extra.

Equis (ex): Es más o menos la altura de la letra «x» minúscula de una fuente en

concreto, aunque en los navegadores actuales suele ser la mitad de una em.

Píxeles (px), y por último, los porcentajes son eso, porcentajes.

Los detalles excepcionales se explicarán en la descripción de la propiedad

correspondiente.

Entre los comandos que se utilizan se encuentran:

FUENTES Y TEXTO:

1-direction 2-font 3-font-family

4-font-size 5-font-style 6-font-variant

7-font-weight 8-letter-spacing 9-line-height

10-text-align

CAJAS

1-border 2-border-color 3-border-style

4-border-width 5-border-bottom 6-border-bottom-

color

7-border-bottom-style 8-border-bottom-width 9-border-left

10-border-left-color

COLORES Y FONDOS

1-background 2-background-attachment 3-background-color

4-background-image 5-background-position 6-background-repeat

7-color

POSICION Y FLOTADO

1-bottom 2-clear 3-float

4-left 5-position 6-right

7-top 8-z-index

LISTAS

1-display (lista) 2-list-style

3-list-style-image 4-list-style-position

5-list-style-type

TABLAS

1-border-collapse 2-border-spacing 3-caption-side

4-display (tablas) 5-empty-cells 6-table-layout

CONTENIDO GENERADO

1-content 2-counter-increment

3-counter-reset 4-quotes

INTERFAZ DE USUARIO

1-cursor 2-outline 3-outline-color

4-outline-style 5-outline-width

RELACIÓN DE PROPIEDADES PARA MEDIOS DE IMPRESIÓN

En realidad, las propiedades de CSS que he recogido en la sección anterior del curso

son propiedades para medios visuales en general, y no exclusivamente para pantalla, por

mucho que sea éste el medio al que más comúnmente vamos a aplicarlas; en este

sentido, muchas de ellas son aplicables a una hoja de estilo para impresión. No obstante,

hay algunas exclusivas para la página impresa, y son esas las que describo aquí.

Aunque pueda resultar obvio decirlo, ahí va: estas propiedades se aplican a un medio

distinto de la pantalla. Por ello hay que tener en cuenta una serie de detalles:

La fuentes deben ser oscuras para contrastar sobre un fondo blanco, que es la mejor

forma de facilitar su legibilidad.

Se deberían eliminar las imágenes que no tengan función con respecto al contenido.

Las medidas deben ser reales, es decir, centímetros o puntos para márgenes y fuentes.

Se deben eliminar todos los elementos de la página dirigidos a la interacción del

usuario, como barras de navegación.

HERENCIA Y CASCADA

En la sección sobre selectores y pseudoselectores he indicado los diferentes métodos

para aplicar propiedades de estilo a uno o varios elementos. No obstante, el aspecto

final que presentará cada elemento no depende sólo de las declaraciones individuales

que se han especificado para él, sino que intervienen dos mecanismos de CSS:

La herencia: las declaraciones aplicadas a un elemento que son heredables se aplican a

sus descendientes.

La cascada: cuando diversos estilos se aplican a un mismo elemento y entran en

conflicto, CSS establece una serie de reglas para establecer cuál prevalece, según tres

factores: importancia, especificidad y orden.

Además, hemos de tener en cuenta que son varios los orígenes de las hojas de estilo que

se aplican a cualquier documento:

Por un lado, la primera hoja de estilo la aporta el agente de usuario. Cuando en los

navegadores elegimos desactivar el soporte de CSS, solemos decir que estamos viendo

la página «sin estilo», pero eso no es rigurosamente cierto: los encabezados tienen unos

márgenes por defecto, las listas presentan un tipo de viñeta, los vínculos son azules, etc.

Ese aspecto viene definido por una hoja de estilo; por ejemplo, ésta es la hoja de estilo

de Firefox 2.1

Por otro lado, el usuario puede haber definido su propia hoja de estilo. Por ejemplo, en

Opera 9 es posible especificar la ubicación de esta hoja de estilo personalizada a través

de Ver → Estilo → Administrar modos… → Pantalla → Mi hoja de estilo.

Por último, están los estilos que el autor haya aplicado a su documento.

EL MODELO DE CAJA DEL W3C Y EL DE INTERNET EXPLORER

El modelo de caja del W3C es aditivo, es decir, los sucesivos valores de las propiedades

«rodean» la caja generada hasta ese momento, aumentando el espacio designado para el

elemento. Sin embargo, el modelo tradicional de Internet Explorer ha sido sustractivo,

es decir, el relleno y borde reducen el espacio final asignado al contenido.

Nos podríamos conformar con la DTD 1.0 estricta, pero si no queremos hay dos

posibles soluciones:

La solución si no nos queremos conformar con la DTD 1.0 estricta podríamos sustituir

el relleno de los elementos empleados en la composición por el margen de sus hijos o

Aprovechar la falta de soporte en Explorer 6 de los selectores avanzados, y crear dos

reglas en la CSS, una con las dimensiones apropiadas y una posterior con las

dimensiones correctas para el modelo aditivo.

CLARIFICACIÓN DEL USO DE ID Y CLASS

id (…) Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un

documento.

class (…) Este atributo asigna un nombre de clase o conjunto de nombres de clases a un

elemento. Cualquier número de elementos pueden tener asignados el mismo nombre o

los mismos nombres de clase.]

El id se emplea para identificar un elemento estructural importante del documento, o un

elemento único al que hay que otorgar especial relevancia por su parte, class se aplica

cuando diferentes elementos tienen en común ser un tipo de vínculo especial, u ofrecer

una advertencia.

ALGUNOS CONSEJOS PARA OPTIMIZAR UNA HOJA DE ESTILO

Aplicar los aspectos más generales de un estilo a los elementos situados más

altos en el esquema de herencia de las declaraciones.

Agrupar selectores cuando coincidan sus declaraciones.

Emplear la sintaxis abreviada de las propiedades siempre que sea posible.

Emplear de la manera más restrictiva posible class, en favor de id y de los

selectores avanzados.

No especificar los valores por defecto de una propiedad.

VALIDACIÓN DE UN DOCUMENTO CSS

Es conveniente que la validación para evitar tener que depurar líneas que pudiesen

afectar por herencia a declaraciones posteriores.

CUESTIONES DE ACCESIBILIDAD RELATIVAS A CSS

Crear un estilo de presentación de los contenidos homogéneo en todo el sitio.

Emplear unidades relativas para medidas de los elementos, aunque puede ser

discutible por los problemas de accesibilidad.

Asegurar que el contraste entre el color de los textos y sus respectivos fondos.

Por último hacer pruebas adicionales con aDesigner un programa que permite

visualizar una página emulando distintos problemas de visión.

CAPA DE COMPORTAMIENTO DEL DOCUMENTO

LENGUAJES DE SCRIPT Y JAVASCRIPT

Un poco de historia

En 1995 Brendam Eich desarrolló un lenguaje de comandos a procesar en el lado del

cliente para el lanzamiento de Netscape 2.0, Netscape pidió la cooperación de Sun

Microsystems, y poco antes del lanzamiento de Netscape 2.0 cambió el nombre del

lenguaje a su denominación actual, JavaScript, en gran medida para atraer parte de la

publicidad que por entonces estaba logrando un lenguaje con el que programar applets.

JavaScript hoy

JavaScript consta de tres componentes:

ECMAScript, que define todo lo relativo a su sintaxis.

El DOM, o Modelo de Objeto de Documento (Document Object Model), una

API para trabajar sobre la estructura de un documento y permitir su

modificación.

El BOM, o Modelo de Objeto de Navegador (Browser Object Model), que

permite la manipulación de la ventana del navegador

.

SINTAXIS BÁSICA DE JAVASCRIPT

JavaScript es un lenguaje interpretado, no compilado. Significa que sólo se necesita el

bloc de notas para programar un archivo .js, y vincularlo a una página para ver los

resultados en un navegador.

JavaScript es sensible

Es una buena práctica que los enunciados terminen en un punto y coma (;).

Las variables y sus tipos

Las variables se declaran por medio de la palabra clave var, pero no es necesario

declarar su tipo.

Los nombres de las variables pueden comenzar por una letra, el guión bajo (_) y el

símbolo de dolar ($).

Los nombres de variables no pueden coincidir con palabras clave pertenecientes a la

propia sintaxis de JavaScript.

Escalares

Los escalares son variables que corresponden a lo que se conoce como tipos primitivos,

los escalares pueden ser:

Indefinidos: Son variables declaradas pero que aún no cuentan con un valor.

Booleanos2: Son variables que sólo aceptan dos valores, true o false, 1 o 0.

Numerales: Son valores numéricos de 32 bits para los enteros y de 64 bits para

los fraccionarios.

Nulos: En realidad no es un tipo, sino un valor que puede devolver JavaScript

que no corresponde a uno de los tipos primitivos.

Matrices

Una matriz almacena diversos valores3, a los que se accede haciendo referencia al

índice del valor. Para acceder a los valores almacenados, simplemente habría que

indicar el índice, la posición, que ocupan, comenzando por el cero.

OPERADORES

Los operadores son símbolos con los que, como su nombre indica, se pueden realizar

operaciones con variables, valores constantes o variables y valores constantes. Hay

muchos tipos de operadores, pero para esta introducción voy a centrarme en los más

comunes:

Operadores aritméticos: Son los que se emplean para realizar operaciones

aritméticas con valores y/o variables.

Operadores comparativos: Se emplean para establecer comparaciones entre

valores y/o variables.

Operadores lógicos: Se emplean para establecer condiciones, por lo que los

explicaré en la sección del curso dedicada a los condicionales.

ESTRUCTURAS CONDICIONALES

En ocasiones nos interesa controlar el flujo de la ejecución estableciendo alternativas, es

decir, que una serie de enunciados se ejecuten en algunas ocasiones y en otras no. Para

permitir esto existen las estructuras condicionales.

if … else

Por medio de if se puede indicar una condición que, de cumplirse, permite la ejecución

de uno o más enunciados. Por medio de else se puede establecer una alternativa, aunque

su uso es opcional.

switch

Por medio de switch se puede listar una serie de bloques de enunciados que se ejecuten

dependiendo del valor de una variable.

Operadores lógicos

! (Negación)

Los enunciados se ejecutan si no se cumple la condición

if(!condición1) {

…enunciados…

}

&& (Y)

Los enunciados se ejecutan si se cumplen ambas condiciones

if((condición1)&&(condición2)) {

…enunciados…

}

|| (O)

Los enunciados se ejecutan si se cumple una de las condiciones

if((condición1)||(condición2)) {

…enunciados…

}

BUCLES

Un bucle es la repetición de uno o varios enunciados un número determinado de veces.

Hay dos estructuras básicas para crear bucles: for y do … while.

for

La sintaxis de for es la siguiente:

for(contador;condición;variación_del_contador){

…enunciados a ejecutar…

}

do … while

El comportamiento de do … while es similar al de for, con la diferencia de que primero

se ejecutan los enunciados y luego se comprueba la codición. Su sintaxis es:

do{


} while (condición);

FUNCIONES

Una función es un bloque de enunciados que componen un comportamiento que puede

ser invocado las veces que sea necesario.

Una función de JavaScript presenta este aspecto:

function nombre_de_la_función(){


}

Para ejecutar la función hay que invocar su nombre en cualquier momento y desde

cualquier parte de un código, con una excepción: la función debe haber sido definida

anteriormente.

OBJETOS NATIVOS E INCORPORADOS

Un objeto es una colección de propiedades. Para acceder a una propiedad o un método

de un objeto hay que concatenar ésta con el nombre del objeto por medio de un punto

(.):

Objeto.propiedad;

Objeto.metodo(argumentos);

Objetos Nativos: Son objetos proporcionados por una implementación de este

estándar que son independientes del entorno; cada vez que se quiere emplear

uno de ellos hay que crear una instancia del objeto por medio de la palabra clave

new. Podemos mencionar: Array, Boolean, Date, Error, EvalError, Function, etc.

Incorporados: Son, como los anteriores, objetos que tiene que proporcionar una

implementación de ECMA-262 y que deben estar presentes al iniciarse la

ejecución de un programa. Son: Global y Math

Anfitriones: Es todo objeto definido por una implementación concreta de ECMAScript,

y que sí depende del entorno.

EVENTOS

Los eventos son acciones que ocurren sobre un documento, bien por parte del usuario o

bien por parte del navegador —por ejemplo cargar el documento; podemos rescatar los

siguientes:

Blur: El elemento pierde el foco.

change : El contenido del elemento cambia.

Click: El usuario hace clic sobre el elemento.

Dblclick: El usuario hace doble clic sobre el elemento.

Focus: El elemento gana el foco.

Keydown: El usuario presiona una tecla.

Keypress: El usuario presiona una tecla y la mantiene pulsada.

Keyup: El usuario libera la tecla.

Load: El documento termina su carga.

Mousedown: El usuario presiona el botón del ratón en un elemento.

Mousemove: El usuario mueve el puntero del ratón sobre un elemento.

Mouseout: El usuario mueve el puntero fuera de un elemento.

Los manejadores de eventos son los que se escriben con el prefijo on y se emplean

como atributos de los elementos. Sin embargo, no se deberían emplear en el código de

un documento para mantener la separación del contenido y los comportamientos.

El DOM

El DOM es un modelo jerárquico, todo aquello situado en el origen o el final de una

rama del árbol es un nodo, y los nodos establecen entre sí relaciones de parentesco. Así,

todo documento puede representarse como un conjunto de nodos relacionados entre sí,

existiendo un número limitado de tipos de nodos que son suficientes para representar

cualquier documento, y que han sido definidos por el W3C.

Nos proporcionan datos sobre un nodo: nodeName y nodeValue. Sin embargo, a

diferencia de nodeType, su valor no es una constante, sino que dependiendo del tipo de

nodo el valor que devuelven .

El DOM no se recoge en un único documento, sino que consiste en tres niveles, cada

uno de ellos está a su vez compuesto por varias recomendaciones referidas a distintos

aspectos de la interfaz:

DOM 1: Define el conjunto mínimo de objetos e interfaces con los que

manipular la estructura de un documento, ya se trate de un documento HTML o

XML, o cualquier lenguaje basado en éste.

DOM 2: Extiende las interfaces definidas en el DOM1, por ejemplo añadiendo

soporte para espacios de nombre, y permitiendo así poder manipular secciones

del documento asociadas a uno de ellos.

DOM 3: Define una interfaz con la que cargar documentos XML que puedan

integrarse en el árbol de otro documento.

GETELEMENTBYID Y GETELEMENTSBYTAGNAME

El método getElementById permite, como su nombre indica, seleccionar un elemento

del documento por medio del valor del atributo id que se le haya asignado. Su sintaxis

es la siguiente:

document.getElementById('id_del_elemento');

Por medio del método getElementsByTagName lo que se selecciona es una lista de

nodos cuyo elemento es el especificado como parámetro; a cada uno de los nodos se le

asigna un índice, de acuerdo al orden en el que aparecen en el marcado del documento.

Su sintaxis:

document.getElementsByTagName('elemento'); aquí obtenemos todos los elementos

de un tipo.

document.getElementsByTagName('elemento')[índice_del_elemento]; elegimos una

de ellos en concreto

PARENTNODE, FIRSTCHILD, LASTCHILD, NEXTSIBLING Y

PREVIOUSSIBLING.

parentNode: seleccionar el elemento padre de otro elemento.

firstChild: seleccionamos el primer hijo de un elemento aunque hay

discrepancias entre los diversos navegadores sobre qué debe considerarse o no

hijo de un nodo.

lastChild: La propiedad lastChild funciona exactamente como firstChild, pero

se refiere el último de los hijos de un elemento. Se aplican, por tanto, las mismas

indicaciones anteriores.

nextSibling: Gracias a nextSibling, lo que podemos seleccionar es el siguiente

hermano de un elemento.

previousSibling: funciona igual que nextSibling, pero selecciona el hermano

anterior de un elemento.

CREATEELEMENT Y CREATETEXTNODE

createElement: Crea un elemento concreto. La sintaxis de createElement es

muy sencilla:

document.createElement('elemento_a_crear');

createTextNode: Crear un texto con el que poblarlo por medio de

createTextNode; el texto a crear por medio de este método debe ir

entrecomillado. Su sintaxis:

document.createTextNode('el_texto_que_desee');

innerHTML: nos permite especificar directamente el marcado interno de un

elemento.

APPENDCHILD, INSERTBEFORE, REPLACECHILD,

REMOVECHILD Y CLONENODE

Estos métodos sirven para trabajar incorporando, modificando o eliminando nodos.

appendChild: Por medio de appendChild podemos incluir en un nodo un nuevo

hijo, de esta manera:

elemento_padre.appendChild(nuevo_nodo);

insertBefore: nos permite elegir un nodo del documento e incluir otro antes que

él. Su sintaxis es:

elemento_padre.insertBefore(nuevo_nodo,nodo_de_referencia);

replaceChild: Para reemplazar un nodo por otro contamos con replaceChild,

cuya sintaxis es:

elemento_padre.replaceChild(nuevo_nodo,nodo_a_reemplazar);

removeChild: Método para eliminar los hijos de un nodo. La sintaxis es:

elemento_padre.removeChild(nodo_a_eliminar);

cloneNode: Metodo que permite crear un clon de un nodo por medio de

cloneNode.

elemento_a_clonar.cloneNode(booleano);

ADDEVENTLISTENER

Se define en el nivel 2 del DOM, que nos permite indicar al agente de usuario que

permanezca atento a la interacción de un usuario sobre un elemento en concreto, sin

necesidad de tocar un sólo caracter de nuestro marcado. La sintaxis de addEventListener

es muy sencilla:

elemento_que_se_escucha.addEventListener('evento',función_a_lanzar,booleano);

EL FLUJO DE LOS EVENTOS: CAPTURA Y BURBUJA

Es un modelo de comportamiento, según éste, cuando se hace clic sobre un elemento, el

evento se propaga en dos fases, una que es la captura, comenzando en el nivel superior

del documento y recorre los elementos de padres a hijos y la otra la burbuja, el orden

inverso, ascendiendo de hijos a padres.

El BOM

Es un ámbito en el que trabajamos sobre los códigos propietarios implementados por los

diversos fabricantes de los navegadores, en el que es difícil localizar un denominador

común de las funcionalidades que tenemos a nuestra disposición. Pero debemos confiar

en él lo menos posible.

Entre los objetos que podemos ver en el BOM tenemos:

Window: Este objeto es la ventana del navegador como tal.

Document: Nos permite trabajar con las propiedades del documento cargado.

Navigator: Recoge una serie de propiedades que identifican el propio

navegador.

Screen: Nos proporciona datos sobre la pantalla del usuario.

WINDOW

Entre los métodos de Windows tenemos:

moveBy(x,y): Desplaza la ventana desde su punto actual según el número de

píxeles definidos en los parámetros.

resizeBy(x,y): Modifica el tamaño de la ventana en la cantidad, donde x

es la anchura e y la altura.

resizeTo(x,y) Modifica el tamaño de la ventana hasta el definido en los

parámetros.

open() Abre una nueva ventana del navegador.

close(): Cierra una nueva ventana del navegador.

CUENTAS ATRÁS E INTERVALOS

Hay dos métodos adicionales de Window el setTimeout para la función a lanzar que se

ejecutará una vez agotado el tiempo y setInterval el tiempo en milisegundos que ha de

transcurrir antes de lanzarla:

setTimeout(función_a_lanzar,milisegundos);

setInterval(función_a_lanzar,milisegundos);

EL OBJETO DOCUMENT

El objeto Document hace referencia al documento mismo cargado en la ventana, y

fácilmente puede confundirse con el document de la sección del DOM4.

Aquí podemos rescatar el objeto location que es dependiente de Document —aunque

por la confusión debida a la falta de estándares para el BOM, lo es a la vez de Window.

EL OBJETO NAVIGATOR

Contiene información sobre el propio navegador. Entre algunas de sus propiedades mas

importantes tenemos:

appCodeName: Es el nombre en código del navegador.

AppName: Es el nombre oficial del navegador.

AppVersion: Es la versión del navegador.

Platform: Es la plataforma sobre la que se está ejecutando.

Plugins: Es una matriz con los complementos del navegador.

UserAgent: Es el encabezado de agente de usuario del navegador.

EL OBJETO SCREEN

Algunas propiedades del objeto Screen

AvailHeight: Es la altura de la pantalla del usuario, menos el espacio que ocupen

las barras del sistema operativo.

AvailWidth: Es la anchura de la pantalla del usuario, menos el espacio que

ocupen las barras del sistema operativo

ColorDepth: Es el número de bits de color que emplea la pantalla.

Height: Es la altura total de la pantalla del usuario.

Width: Es la anchura total de la pantalla del usuario.

TÉCNICAS DE ACCESIBILIDAD: EL JAVASCRIPT NO OBSTRUSIVO. LA

TEORÍA DE LA MEJORA PROGRESIVA

JAVASCRIPT Y ACCESIBILIDAD

Para desencadenar los comportamientos hay que emplear manejadores de eventos que

no dependan del dispositivo de entrada del usuario, o bien asegurarse de que los que

dependen de un dispositivo se complementan con un evento de teclado. Asi como

también los objetos incrustados en un documento deberían crearse añadiendo las

características de accesibilidad de que dispongan, evitar el refresco automático de las

páginas y no lanzar ventanas emergentes sin avisar previamente al usuario

LA MEJORA PROGRESIVA

Es una teoría y una metodología a la vez. La idea es que se debe partir de un documento

cuyo contenido y funcionalidad básica no dependa más que del mínimo común a todo

agente de usuario.

Trabajo de Estándares Web

Documents

Transcript of Trabajo de Estándares Web