Una vez escrito tu documento XHTML, semánticamente correcto, viene el siguiente paso, el cual es maquetar el sitio, o en otras palabras ponerle el diseño, para esto te auxilias en la técnica de remplazo de imágenes para cambiar un texto por una imagen, permitiendo accesibilidad a un mayor grupo de visitantes.

A continuación voy a mostrar diferentes métodos para aplicar esta técnica de remplazo de imágenes, pero antes tengo que mencionar que el remplazo de imágenes permite tener una buena accesibilidad a los usuarios, como a los buscadores, y he aquí lo interesante, que al tener accesible tu sitio, a los buscadores les agrada y ten por seguro que indexarán tu sitio rápidamente.

Classic FIR
Esta técnica fue propuesta por Doug Bowman’s , la cual consiste en agregar la etiqueta <span> al texto, para después ocultarla. Es una técnica muy sencilla, pero no es recomendada, pues si el usuario tiene deshabilitado el uso de imágenes y css activado, simplemente no verá nada. El código para esta técnica es el siguiente.

/* css */
#header {
width: 329px;
height: 25px;
background-image: url(remplazo.jpg);
}
#header span {
display: none;
}


Single-pixel <img> Replacement
Método propuesto por Radu Darvas, muy semejante a la anterior, resuelve el problema de la anterior agregando al XHTML la imagen con su parámetro de texto alternativo, su problema o inconveniente es el hecho de agregar un elemento extra al código y complica el mantenimiento del sitio. El código es el siguiente.

/* css */
#header {
width: 329px;
height: 25px;
background-image: url(remplazo.jpg);
}
#header span {
display: none;
}


Radu Method
Propuesto por el mismo autor del método anterior, consiste en agregar un margen al texto fuera de la vista del usuario y poner en el fondo la imagen correspondiente, no agrega etiquetas extras al código fuente, el inconveniente o problema es el mismo que el primer método señalado, y se presenta cuando el usuario tiene desactivadas las imágenes y css activado. El código es el siguiente.

/* css */
#header {
background: url(remplazo.jpg) no-repeat top right;
width: 2329px;
height: 25px;
margin: 0 0 0 -2000px;
}


Leahy/Langridge Method
Método propuesto por Seamus Leahy y Stuart Langridge, consta de poner el alto en cero, especificarle al padding superior el alto de la imagen a remplazar, y asignarle la imagen de fondo, con este método no se necesita una etiqueta extra span, pero su inconveniente al igual que los anteriores no funciona correctamente cuando el usuario tiene la imágenes desactivadas y css activado.

/* css */
#header {
text-indent: -100em;
overflow: hidden;
background: url(remplazo.jpg);
height: 25px;
}


Phark Revisited
Este método es muy usado en la red, y consta de indentar el texto fuera de la vista del usuario y poner la imagen en el fondo. Su problema es el mismo que los anteriores, no muestra nada cuando el usuario tiene desactivadas las imagenes y activado el css.

/* css */
#header {
text-indent: -9999px;
background: url(remplazo.jpg);
height: 25px;
}


Gilder/Levin Method
Tom Gilder y Levin Alexander, Consiste en agregar un span seguido del texto, luego haces relativa la caja contenedora y absoluto el span, posicionas el span en las coordenadas 0,0; le asignas la imagen y ocultará el texto, esto soluciona el problema cuando el usuario tiene desactivadas las imagenes y activado el css, su inconveniente es cuando la imagen es transparente, el texto no se oculta.

/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(remplazo.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}


Pues bien, he mencionado algunas de las técnicas mas populares para el remplazo de imagenes, espero que sea de utilidad este artículo, y cualquier duda o comentario será bien recibido, Hasta la próxima.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Beneficios
Los beneficios de escribir documentos semánticamente correctos, es que podemos manipular el DOM de una manera sencilla, podemos aplicar los estilos correctamente, mas fácil y con mejores resultados, tus sitios serán mas accesibles, esto atrae mas trafico, y por supuesto, a los buscadores les agrada encontrarse con sitios estructurados correctamente.

Significado
Para esto, primeramente es necesario saber que significa la palabra semántica, Proviene del griego “semantikos”, que quería decir “significado relevante”, derivada de “sema”, lo que significaba “signo”, otra definición dice Rama de la lingüística que se ocupa de los cambios de significación que se han operado en las palabras.

Con esta definición en cuenta, notamos que la semántica es el significado relevante de las palabras, el sentido de estas, su significado.

Relacionando estos conceptos podemos decir que para crear un documento XHTML semánticamente correcto, es necesario escribir solo las sentencias necesarias, solo aquellas etiquetas que dan el significado que queremos dar a entender. Por ejemplo, para poner un texto en negrita, anteriormente lo hacíamos con el tag <b>, y ponía el texto en negrita, ahora bien, hazte esta pregunta ¿Por qué pusiste el texto en negrita? Seguramente para resaltar esas palabras, para que los lectores vean el énfasis de estas, bueno, si te das cuenta el significado es dar énfasis, entonces en lugar de utilizar la etiqueta <b> utilizaríamos ahora la etiqueta <strong> la cual significa que el texto seleccionado tiene mas énfasis, con CSS podemos modificar el aspecto de la etiqueta strong, por default los navegadores la ponen en negrita. Pero nosotros podemos modificar el estilo.

Bueno, existen seis diferentes tipos de títulos, por lógica nuestra página, sitio o portal debe tener un titulo principal, entonces es aquí donde se utilizará la etiqueta <H1>, con esta etiqueta estamos indicando que es el titulo principal, y no se recomienda utilizar otra vez esta etiqueta, para eso podemos utilizar h2, h3, h4, h5 o h6, las veces que queramos, por ende no utilizaríamos h4 si no hemos utilizado h3.

Es importante que cuando escribimos nuestros documentos utilizaremos la etiqueta <p> para nuestros párrafos, cuando queramos citar a un autor utilizaremos la etiqueta <q> que significa quote (En ingles cita).

Anteriormente para subrayar una palabra utilizábamos la etiqueta <s>, ahora esto esta totalmente descontinuado, esto lo podemos hacer con CSS, de la misma manera las letras en cursiva, todo esto lo haces mediante clases y selectores con CSS.

El propósito de crear un documento HTML es simplemente mostrar la información en texto plano, es decir sin ninguna alteración gráfica, únicamente lo que la gente busca, la información ordenada correctamente, esto hace nuestros sitios accesibles para cualquier persona.

Conclusión
He dicho entonces que nuestros documentos, no deben tener alteraciones graficas, entonces ¿cómo es que se hará agradable a la vista?, ¿cómo introducimos colores, imágenes, efectos? La respuesta es sencilla y ya he venido comentando al respecto, CSS es el encargado de modificar la apariencia de nuestros sitios.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Antes de continuar, es necesario dar el significado de XHTML eXtensible HyperText Markup Language, ahora bien, el objetivo de XHTML es simplemente mostrar el contenido, en ningún momento modificar la apariencia, sino simplemente escribir la información a mostrar con las correspondientes etiquetas, por ejemplo, un documento puede tener el titulo, párrafos de texto, listados de texto, entre otras cosas mas, OK, he dicho entonces que no modificamos la apariencia, sino únicamente el contenido, para modificar la apariencia existe CSS, un “lenguaje” para modificar el diseño del documento.

En este artículo solo voy a tratar sobre XHTML y no voy a mencionar sobre CSS, en futuros artículos lo haré, lo prometo.

Bueno, una vez teniendo claro esto, manos a la obra, voy a citar las partes que son indispensables en un documento XHTML, y mencionar que toda etiqueta abierta debe ser cerrada.

El DocType
El DocType no es nada más que una especificación, existen varias, cada una de ellas tiene diferencias que la identifican del resto, al especificar el DocType, le estamos diciendo al navegador que estándar vamos a utilizar, personalmente prefiero la especificación XHTML 1.0 Strict, puesto que es el estándar que actualmente es utilizado por la comunidad de desarrolladores, nos permite hacer aplicaciones accesible si lo seguimos al pie de la letra. El código necesario para indicarle al navegador el estándar a utilizar es el siguiente.
[code lang="strict4xhtml"]
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
[/code]
El root
El root o elemento raíz de un documento, es la etiqueta html, dentro de estas estarán todas las otras etiquetas que necesitemos, si alguna vez escribiste documentos html entonces la única diferencia que hay, es que el DocType que estamos utilizando nos obliga a especificar el lenguaje que contiene nuestro documento, sea Ingles (en), Español (es), Japonés (ja), francés (fr), etc. Entonces esta etiqueta nos queda asi.
[code lang="strict4xhtml"]

[/code]
En este punto es donde el árbol del DOM se divide en dos nodos, la cabecera y el cuerpo del documento.

El head
Dentro de la etiqueta head, se coloca el titulo de la página, la codificación que usaremos en el documento, links hacia hojas de estilos CSS, JavaScript y algunas etiquetas Meta.
[code lang="strict4xhtml"]

[/code]
La codificación
Existen numerosos tipos de codificaciones, y muchas veces se hace un lío entre tantas, a grandes rasgos, la codificación es el formato con el que se guardan los caracteres utilizados en la página, para el español la codificación correspondiente es ISO-8859-1, esta contiene los caracteres como la eñe y los acentos en las vocales, otra codificación la cual es recomendable utilizar es la utf-8, ahora bien, existen dos maneras de especificar la codificación a utilizar, una de ellas y la que recomiendo personalmente, es ponerlo dentro del head, de la siguiente manera.
[code lang="strict4xhtml"]

[/code]
La segunda manera es ponerlo en la primera línea del documento, pero si estas utilizando PHP tendrás algunos problemas, es por eso que recomiendo la primera forma que mencioné, entonces si quieres ahcerlo de esta manera pones la siguiente linia al principio del documento.
[code lang="strict4xhtml"]

[/code]
El body
La última parte obligatoria que debe tener nuestro documento es el body, dentro de esta etiqueta estará todo nuestro contenido que queremos mostrar al usuario, esta rama del árbol del DOM es la que suele ser la mas grande.

Documento final
Sugiero que copies todo lo que he venido mostrando, y lo pegues en un solo documento, y lo guardes como una plantilla, esto para no tener que estar escribiendo lo mismo cada vez que quieras hacer una página. Juntando todo lo visto en un solo documento, quedaría de la siguiente forma.
[code lang="strict4xhtml"]
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

[/code]
Agregando contenidos
Los contenidos los ponemos dentro del body, es importante tener en cuenta que solo debemos los elementos de la información que queremos mostrar, y recordar que la apariencia se hace por medio de CSS.

Deberíamos indicar en nuestro documento el titulo de este, para eso lo hacemos con las etiquetas H1, ósea cabecera uno, los párrafos los introducimos dentro de las etiquetas p que significan Paragraph, ejemplo:
[code lang="strict4xhtml"]

Primer documento

Este es el primer documento que estoy haciendo, teniendo en cuenta que solo tengo que declarar la información o estructura de mi documento, y no intentar hacer el diseño de este con etiquetas, Alguna cita de un autor

[/code]
Como puedes darte cuenta, en el ejemplo anterior hay un titulo, un párrafo, y dentro del párrafo unas palabras a las cuales quiero darle mas énfasis, al igual que una cita de un autor, asi es como se escriben los documentos semánticamente correctos, ahora bien, te estarás preguntando que al ver eso en el explorador se ve mal, no tiene colores ni nada por el estilo, bueno es aquí donde entra CSS para darle estilos al titulo, cambiar el estilo de la tipografía, el color, y modificar todos los aspectos visuales.

Comentarios finales
Es de suma importancia escribir nuestros documentos tal y como he mostrado, de esta forma el árbol del DOM estará creado correctamente y se podrá accederlo fácilmente, además de que al seguir los estándares estipulados, nuestras aplicaciones, sistemas o página podrán ser accesibles a una mayor cantidad de personas.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Pero, ¿hasta que punto es conveniente utilizar este jaboncito? Bueno, si bien es cierto, AJAX nos ofrece la posibilidad de consultar al servidor sin recargar la página, ahorrando así ancho de banda, además nos permite agilizar la carga de contenidos en pequeñas secciones del sitio, y algunas otras cosas más, pero, ¿Qué con la accesibilidad? ¿Qué con los motores de búsqueda? ¿Qué con la usabilidad?

AL emplear esta metodología debes pensar en todos los usuarios, un ejemplo claro de esto, es Gmail, pues cuenta con una versión funcional en HTML, y la versión original esta realizada con AJAX, ellos están asegurándose de dar la funcionalidad a todos los usuarios.

Algunos problemas
Uno de los mayores problemas a considerar es el hecho de la accesibilidad, y me estoy refiriendo tanto a personas normales como a incapacitados y buscadores, un sitio Web debe estar correctamente estructurado y diseñado para poder ser accesible a todo tipo de usuario, AJAX es soportado únicamente por los exploradores que cuentan habilitado JavaScript, así que debes tener muy en cuenta esto, de lo contrario tu sitio Web no será indexado en los buscares, eso significa que no tendrás mucho tráfico, a continuación pongo un artículo al respecto http://weblogs.asp.net/mschwarz/archive/2005/08/06/421761.aspx

Otro problema que me he encontrado al utilizar esta metodología es la usabilidad, muchas veces el usuario no se da cuenta que la página cambió, al presionar un enlace no se percata en que parte de la página se cargo la información, hay que tener muy en cuenta esto, hay que darle a conocer al usuario el estado del sistema, de una forma muy visible, de una forma que puedas llamar la atención del usuario, y no debe ser rápida, debe ser lenta, pues es común que los usuarios no miran la pantalla mientras escriben.

El problema del bookmark se ha resuelto con un poco de JavaScript extra, pero debes tenerlo en cuenta cuando utilizas AJAX, si un usuario le interesó tu artículo y quiere agregarlo a sus favoritos, debes asegurarte que lo podrá hacer.

¿Dónde si y donde no?
He visto algunos sitios, donde utilizan AJAX, que los contenidos principales los cargan con AJAX, en la parte principal de la página, convirtiendo así el DIV básicamente en un FRAME, en lo personal no recomiendo esto, pues estamos regresando a los 90s donde se solían utilizar frames, solo que ahora lo hacemos con más “nivel”.

Personalmente recomiendo el uso de AJAX en formularios, porque los formularios están pensados para ser utilizados por personas, robots buscadores no se ven afectados, además de que ayudan al usuario.

Comunicación entre usuarios, ósea una sala de Chat, donde los usuarios puedan recibir mensajes simultáneamente.

Encuestas, votaciones y semejantes, el uso de AJAX es realmente bueno, pues evitas cargar toda la página.

Auto completar textos es otro ejemplo donde podemos emplear AJAX, claro esta que todas estas aplicaciones tienen que poder funcionar sin tener activado el JavaScript.

Conclusión
Si eres un desarrollador experimentado, has realizado varios sitios o aplicaciones web, el uso de AJAX deberías emplearlo con la cautela necesaria, si no tienes experiencia alguna desarrollando, no te recomiendo mucho el uso de AJAX para sitios importantes, a menos que estés completamente seguro de lo que estas haciendo.

Referencias
http://www.usabilityviews.com/ajaxsucks.html http://www.standards-schmandards.com/2005/ajax-and-accessibility
http://www.sitepoint.com/blogs/2005/03/10/usability-and-accessibility-with-ajax/

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.