Hola a todos, me complace notificarles que a partir de este momento este blog se muda a http://www.felixalvarez.net
Los espero.
Saludos
Felix Alvarez.
lunes, 8 de septiembre de 2008
jueves, 27 de septiembre de 2007
Errores más comunes a la hora de programar Xhtml
- Elimina del código HTML aquellos elementos que sólo sirven para cambiar el aspecto visual de presentación. Por ejemplo, para marcar el énfasis utiliza los elementos EM y STRONG, que aportan información estructural, en vez de B e I, que sólo aportan aspecto visual (negrita y cursiva).
- Recuerda: Las gramáticas estrictas desaprueban los elementos de presentación como B, I, CENTER, etc.
- No utilices elementos estructurales para dar formato al texto. Por ejemplo, en vez de usar los elementos de marcado de citas BLOQUOTE o Q para lograr el efecto de texto indentado, sírvete de las propiedades de CSS para tal efecto ("text-indent").
- Utiliza CSS para dar estilo al texto, en lugar de representarlo mediante imágenes. Un texto incluido en una imagen deja de estar disponible para aquellas personas que no pueden verla. Si usas esta técnica añade el mismo texto que aparece en la imagen al texto alternativo de la misma (atributo "alt").
- Evita la utilización de tablas para maquetar. En su lugar usa marcadores estructurales y las hojas de estilo para controlar la maquetación del documento. Recuerda lo comentado sobre tablas de maquetación en la unidad 4 y el ejemplo de maquetación mediante CSS.
- Evita añadir espacios en blanco o mediante la entidad en las celdas vacías
de las tablas para poder proporcionarles bordes. Usa la propiedad "empty-cells". - No añadas espacios ("nbsp;") para conseguir márgenes al contenido de un elemento. En su lugar, recurre a las propiedades CSS "margin", "margin-top", "margin-right", "margin-bottom" y "margin-left".
- Emplea la propiedad CSS "text-align:center" en lugar del elemento no estándar
CENTER.
Ventajas de Utilizar Hojas de Estilos
La utilización de hojas de estilo, especialmente las externas, que permiten separar el contenido de la presentación, proporciona importantes ventajas:
1-. Mayor facilidad para modificar el estilo de un sitio Web.
De esta forma, al modificar las hojas de estilo cambias la presentación de todas las páginas que hagan uso de dichas hojas.
Si existe una buena separación entre el contenido y la presentación, puedes cambiar el estilo visual de un portal Web sólo con modificar sus hojas de estilo.
2-. Código más claro y sencillo.
El código libre de etiquetas de presentación, usando hojas de estilo externas, es más compacto, claro y sencillo de leer, con lo que su mantenimiento es más sencillo. En el código HTML sólo estaría presente la parte de contenido y estructura del documento, dejando toda la presentación para las hojas de estilo.
La estructura del código es muy clara, reduciéndose casi por completo a un contenido textual dividido en bloques, títulos, textos, listas, enlaces, imágenes, tablas... El número de las diferentes etiquetas y atributos HTML se reduce significativamente.
3-. Código más compacto.
Al trasladar todos los aspectos de presentación y maquetación a las hojas de estilo, el código creado es mucho más compacto. A veces se puede reducir el código a la mitad o incluso menos.
4-. Reducción de los tiempos de carga de las páginas.
Como el código es mucho más compacto, reduces los tiempos de carga de las páginas, facilitando a los-as visitantes el acceso a las mismas.
Ten en cuenta que las hojas de estilo asociadas sólo se descargan en el navegador la primera vez que se necesitan. A partir de ahí, cada vez que una página requiere una hoja de estilo que ya haya sido utilizada, el navegador la busca en su caché en vez de descargarla de la red.
Código más fácil de mantener.
El mantenimiento de las páginas que presentan separación de contenido y presentación es más sencillo y productivo, al tener un código más compacto.
5-. Personalización del estilo.
Algunos usuarios-as, por elección o necesidad, requieren cambiar la presentación de las páginas. Si usas las hojas de estilo facilitas a los usuarios-as la aplicación de sus propias hojas prediseñadas, como por ejemplo estilos de alto contraste o de accesibilidad.
6-. Mayor compatibilidad con diferentes dispositivos.
Separar el contenido y la estructura de la presentación facilita el acceso desde una amplia variedad de dispositivos (pantallas pequeñas, PDAs, móviles de última generación, etc.). Así evitarás crear diferentes versiones de las páginas en función del dispositivo, con el consiguiente ahorro de tiempo y dinero.
Aun así, si quieres controlar más la presentación de las páginas, define varias hojas de estilo diferentes y aplica unas u otras en función del dispositivo del usuario-a.
CSS permite definir diferentes estilos según el tipo de dispositivo sobre el que se visualice. Es lo que se denomina "control de medios".
1-. Mayor facilidad para modificar el estilo de un sitio Web.
De esta forma, al modificar las hojas de estilo cambias la presentación de todas las páginas que hagan uso de dichas hojas.
Si existe una buena separación entre el contenido y la presentación, puedes cambiar el estilo visual de un portal Web sólo con modificar sus hojas de estilo.
2-. Código más claro y sencillo.
El código libre de etiquetas de presentación, usando hojas de estilo externas, es más compacto, claro y sencillo de leer, con lo que su mantenimiento es más sencillo. En el código HTML sólo estaría presente la parte de contenido y estructura del documento, dejando toda la presentación para las hojas de estilo.
La estructura del código es muy clara, reduciéndose casi por completo a un contenido textual dividido en bloques, títulos, textos, listas, enlaces, imágenes, tablas... El número de las diferentes etiquetas y atributos HTML se reduce significativamente.
3-. Código más compacto.
Al trasladar todos los aspectos de presentación y maquetación a las hojas de estilo, el código creado es mucho más compacto. A veces se puede reducir el código a la mitad o incluso menos.
4-. Reducción de los tiempos de carga de las páginas.
Como el código es mucho más compacto, reduces los tiempos de carga de las páginas, facilitando a los-as visitantes el acceso a las mismas.
Ten en cuenta que las hojas de estilo asociadas sólo se descargan en el navegador la primera vez que se necesitan. A partir de ahí, cada vez que una página requiere una hoja de estilo que ya haya sido utilizada, el navegador la busca en su caché en vez de descargarla de la red.
Código más fácil de mantener.
El mantenimiento de las páginas que presentan separación de contenido y presentación es más sencillo y productivo, al tener un código más compacto.
5-. Personalización del estilo.
Algunos usuarios-as, por elección o necesidad, requieren cambiar la presentación de las páginas. Si usas las hojas de estilo facilitas a los usuarios-as la aplicación de sus propias hojas prediseñadas, como por ejemplo estilos de alto contraste o de accesibilidad.
6-. Mayor compatibilidad con diferentes dispositivos.
Separar el contenido y la estructura de la presentación facilita el acceso desde una amplia variedad de dispositivos (pantallas pequeñas, PDAs, móviles de última generación, etc.). Así evitarás crear diferentes versiones de las páginas en función del dispositivo, con el consiguiente ahorro de tiempo y dinero.
Aun así, si quieres controlar más la presentación de las páginas, define varias hojas de estilo diferentes y aplica unas u otras en función del dispositivo del usuario-a.
CSS permite definir diferentes estilos según el tipo de dispositivo sobre el que se visualice. Es lo que se denomina "control de medios".
miércoles, 26 de septiembre de 2007
Principios generales de usabilidad en sitios web
Principios generales de usabilidad en sitios web
Resumen: Aunque estos principios pueden parecer muy generales son la base de la disciplina y de su extrapolación y perfecta comprensión permite resolver cualquier casuística concreta.El diseño de sitios web deben seguir los siguientes principios:
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
8. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. Sobre todo cuando estamos trabajando con formularios e insercion de datos.
9. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. Se recomiendan tonos pasteles de fondo sobre tonos vivos en tipografia, nunca combinar dos tonos pastel o dos tonos vivos, ya que producirian dificultad de percepcion.
10. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida. Aunque en estos casos no es recomendable bajo ningun concepto el uso de cookies.
11. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
Resumen: Aunque estos principios pueden parecer muy generales son la base de la disciplina y de su extrapolación y perfecta comprensión permite resolver cualquier casuística concreta.El diseño de sitios web deben seguir los siguientes principios:
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
8. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. Sobre todo cuando estamos trabajando con formularios e insercion de datos.
9. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. Se recomiendan tonos pasteles de fondo sobre tonos vivos en tipografia, nunca combinar dos tonos pastel o dos tonos vivos, ya que producirian dificultad de percepcion.
10. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida. Aunque en estos casos no es recomendable bajo ningun concepto el uso de cookies.
11. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
martes, 25 de septiembre de 2007
10 Formas de saber si tu website se ha quedado obsoleto.
10 Formas de saber si tu website se ha quedado obsoleto.
Este contenido lo saque de un manual electronico que encontre hace poco en Internet; aunque esta en tono jocoso y es de hace algun tiempo .. todavia tiene vigencia.
Espero lo disfruten:
"Aviso: Que no te de un patatús si algo de ésto aparece en tus páginas. Anímate a hacer tuspáginas de la forma que te de la gana, ¡aunque alguien diga que son muy malas!.Un buen diseño es cuestión de TU gusto y estilo personal, ¡no el de algún otro!. Además, lasreglas se hacen para romperlas. Yo lo sé....porque ya las he roto algunas veces.
10 Tu imagen de encabezamiento mide más de 50KNo todos los usuarios usan banda ancha para conectarse a Innternet, y una imagen pesada puede hacer que un usuario se desconecte de la pagina por el tiempo de espera para que aparezca dicha imagen. Haz tus imágenes tipo thumbnail, y los demás ya decidiremos si nos interesa verlas o descargarlas.
9 Has colocado una imagen ¡que mide 400K!, ylo importante solo aparece en la esquina inferior izquierda ocupandosolamente 20K.¿Averigua en Diseño lo que se llama la herramienta "Crop"?
8 Utilizas demasiadas imágenes .En realidad debe existir un "equilibrio" entre la parte grafica (imagenes) y el contenido (texto), el cual debe ir en una proporcion de 60/40, siendo 40% del espacio visual ocupado por las imagenes y el 60% del espacio visual ocupado por un texto.
7 ¡No me digas que tienes música de fondo!Situacion tipica"... Si estamos intentando navegar desde la oficina sin que el jefe lo sepa, puedes estar seguro de que en el momento preciso en que cargues la paginilla, ¡zás!, aparece el jefe". Ademas la musica de fondo es uno de los elementos que mas pesa, por lo que genera retardo en la descarga del sitio, y puede llegar a ser aburrida y monotona .. ni demas esta decir que esta pasada de moda!!!
6 Usas un escáner malo, remalo, requetemalo...o no tienes niidea de cómo se maneja.Como esa especie de archivo GIF de 4 bits, que parece un negativo fotográfico después de pasar cinco años en el desierto.
5 Mensajes en la barra de estado.Bueeeeno....eso estaba bien hacia el 1997.
4 Usas imágenes de construcción en tu página.Personalmente pienso que todos sabemos a estas alturas que las páginas SIEMPRE están en construcción.
3 Tu página es un lamento desesperado para encontrar trabajo.http://www.resumen.com/aburrido.html
2 Intermitencias y marquesinas Sin comentarios.
1. ¡Estás en tu propia lista de enlaces recomendados!En Pésimo; Malo, malo; Mejorando y Consejos extra hay mucho más acerca de lo anterior.
Date una vuelta, tal vez veas algo que te interese, y quizás te rías un rato.De todas formas gracias por parar, espero que te hayas divertido."
Este contenido lo saque de un manual electronico que encontre hace poco en Internet; aunque esta en tono jocoso y es de hace algun tiempo .. todavia tiene vigencia.
Espero lo disfruten:
"Aviso: Que no te de un patatús si algo de ésto aparece en tus páginas. Anímate a hacer tuspáginas de la forma que te de la gana, ¡aunque alguien diga que son muy malas!.Un buen diseño es cuestión de TU gusto y estilo personal, ¡no el de algún otro!. Además, lasreglas se hacen para romperlas. Yo lo sé....porque ya las he roto algunas veces.
10 Tu imagen de encabezamiento mide más de 50KNo todos los usuarios usan banda ancha para conectarse a Innternet, y una imagen pesada puede hacer que un usuario se desconecte de la pagina por el tiempo de espera para que aparezca dicha imagen. Haz tus imágenes tipo thumbnail, y los demás ya decidiremos si nos interesa verlas o descargarlas.
9 Has colocado una imagen ¡que mide 400K!, ylo importante solo aparece en la esquina inferior izquierda ocupandosolamente 20K.¿Averigua en Diseño lo que se llama la herramienta "Crop"?
8 Utilizas demasiadas imágenes .En realidad debe existir un "equilibrio" entre la parte grafica (imagenes) y el contenido (texto), el cual debe ir en una proporcion de 60/40, siendo 40% del espacio visual ocupado por las imagenes y el 60% del espacio visual ocupado por un texto.
7 ¡No me digas que tienes música de fondo!Situacion tipica"... Si estamos intentando navegar desde la oficina sin que el jefe lo sepa, puedes estar seguro de que en el momento preciso en que cargues la paginilla, ¡zás!, aparece el jefe". Ademas la musica de fondo es uno de los elementos que mas pesa, por lo que genera retardo en la descarga del sitio, y puede llegar a ser aburrida y monotona .. ni demas esta decir que esta pasada de moda!!!
6 Usas un escáner malo, remalo, requetemalo...o no tienes niidea de cómo se maneja.Como esa especie de archivo GIF de 4 bits, que parece un negativo fotográfico después de pasar cinco años en el desierto.
5 Mensajes en la barra de estado.Bueeeeno....eso estaba bien hacia el 1997.
4 Usas imágenes de construcción en tu página.Personalmente pienso que todos sabemos a estas alturas que las páginas SIEMPRE están en construcción.
3 Tu página es un lamento desesperado para encontrar trabajo.http://www.resumen.com/aburrido.html
2 Intermitencias y marquesinas Sin comentarios.
1. ¡Estás en tu propia lista de enlaces recomendados!En Pésimo; Malo, malo; Mejorando y Consejos extra hay mucho más acerca de lo anterior.
Date una vuelta, tal vez veas algo que te interese, y quizás te rías un rato.De todas formas gracias por parar, espero que te hayas divertido."
Ampliando la funcionalidad de Dreamweaver: Las Extensiones
Hoy por la mañana quede gratamente sorprendido cuando un colega de Blogs, al cual yo sigo por que me encanta su blog http://www.estandaresyaccesibilidad.com (el cual recomiendo que visiten si quieren saber mas sobre usabilidad y estandares web), Gabriel Porras dejo un post para que ampliara algo mas sobre el tema de las extensiones de Adobe Dreamweaver CS3, aka Macromedia Dreamweaver.
Pues bien, amigo Gabriel, te comento que existen infinidad de extensiones, y su funciones son multiples dentro de la suite de Macromedia. Se instalan a traves de la consola de Adobe Exchange aka Macromedia Exchange y algunas son gratuitas y otras son de pago.
Pero mis favoritas, y las cuales uso con bastante frecuencia son las de la empresa InterAKT, actualmente comprada por Adobe y que para la version Adobe Dreamweaver CS3, las puedes descargar como version de prueba por 30 dias; el link esta mi lista de sitios para visitar y recordar, y se llama Adobe Dreamweaver CS3 developer tools (recuerda que debes estar registrado para poder bajarte dicha aplicacion).
Basicamente que tiene esta aplicacion:
- Puedes crear Formularios de Insercion/ Ediccion/ Eliminacion de Datos
- Te permite generar reportes con links a formularios de Insercion, Edicion, eliminacion de Datos, dichos reportes tienen formularios de busqueda parametrizable.
- Un modulo bastante completo de Creacion y Manipulacion de Mailing-List
- Un modulo para crear usuarios logeados y restriccion de acceso a paginas
- Puedes crear formularios para subir multiples imagenes a BD
- Puedes crear Listas Anidadas con conexion a BD
Si en cambio te quedas con la version Macromedia Dreamweaver 8, esta misma aplicacion se llama "INTERAKT KOLLECTION PRO 3.7.1" y tiene las mismas funcionalidades que la sucesora para Adobe Dreamweaver 8.
Ambas son de pago (es lo unico malo), pero si eres desarrollador y tienes que generar sitios dinamicos y no tienes tiempo o no conoces bien el lenguaje en el que estas programando, estas extensiones te facilitaran mucho la vida. Por cierto, puedes programar con ellas en ASP, PHP, JSP y ColdFusion.
De todas formas, Gabriel estoy abriendo en poco tiempo espero, un Blog el cual se llamara Dreamweaver4Dummies, donde compartire con todos ustedes estos conocimientos y otros sobre extensiones y mas cosas que me parecen interesantes de Dreamweaver.
La importancia del Texto en el Contenido Web (II)
Acorde con el Post anterior, a continuacion transcribo algo que encontre en la WWW y que sirve para ilustrar lo que anteriormente comente:
"El texto se considera accesible para prácticamente todos los usuarios si puede ser manejado por lectores de pantalla, navegadores no visuales y lectores braille.
Puede ser presentado visualmente, agrandado, sincronizado con un vídeo para crear un subtítulo, etc. Durante el diseño de un documento que contenga información no textual complemente esa información con textos equivalentes siempre que sea posible.
Cuando se presente al usuario un equivalente textual, éste debe cumplir esencialmente la misma función (en la medida de lo posible) que el contenido original. Para contenidos simples, un equivalente textual puede sólo necesitar describir la función o propósito del contenido. Para contenidos complejos(gráficas, gráficos, etc.) el texto equivalente puede ser más largo e incluirinformación descriptiva.
Deben proporcionarse textos equivalentes para los logotipos, fotografías, botones de envío, viñetas en listas, ASCII art y en todos los vínculos contenidos en un mapa de imagen, así como en las imágenes invisibles usadas para maquetar una página. Pautas WCAG del WAI"
Suscribirse a:
Entradas (Atom)
