trabajo de estándares web
Post on 23-Jan-2016
8 Views
Preview:
DESCRIPTION
TRANSCRIPT
“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)
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.
id: Un identificador.
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.
dir: Un sentido de lectura.
id: Un identificador.
profile: Un URL.
xml:lang: Un código de idioma.
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
dir: Un sentido de lectura.
id: Un identificador.
xml:lang: Un código de idioma.
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]
dir: Un sentido de lectura.
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.
id: Un identificador.
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.
xml:lang: Un código de idioma.
TITLE: Especifica el título del documento.
Atributos
dir: Un sentido de lectura.
id: Un identificador.
xml:lang: Un código de idioma.
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.
class: Uno o más identificadores de clase.
dir: Un sentido de lectura.
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.
id: Un identificador.
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).
style: Una o varias declaraciones de CSS.
tabindex: Un número natural que indica su posición en el orden de tabulación.
title: Un texto plano.
type: El tipo MIME del recurso al que se hipervincula.
xml:lang: Un código de idioma.
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.
class: Uno o más identificadores de clase.
dir: Un sentido de lectura.
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.
id: Un identificador.
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.
style: Una o varias declaraciones de CSS.
title: Un texto plano.
type: El tipo MIME del recurso al que se vincula.
xml:lang: Un código de idioma.
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{
…enunciados a ejecutar…
} 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(){
…enunciados a ejecutar…
}
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.
top related