html – internetlab.es

Diseño web – La accesibilidad

sfilippi — Sat, 03 Aug 2013 07:46:09 +0000

En diseño web definimos la accesibilidad como el potencial de una interfaz de adaptarse fácilmente a sí mismo para un público con necesidades especiales.

Una interfaz accesible para daltónicos requiere que el color rojo y verde o se empleen juntos, un sitio Web accesible para una persona ciega debería tener una interfaz hablado.
Clientes diferentes tienen necesidades diferentes, y desde que los diseñadores de un sitio Web puedan anticiparse a todos, los exploradores de los usuarios permitirán a los mismos configurar su apariencia.

Originalmente el HTML fue estructurado como un formulario amorfo jerarquizado de etiquetas de marcan.
La forma de presentarse cada etiqueta depende del cliente.
Cuando un HTML se escribe con etiquetas que el cliente puede interpretar, la accesibilidad de la interfaz es potencialmente alta.
Los vínculos de navegación, por ejemplo, si están etiquetados, podrían ser leídos por un sintetizador de voz.
En teoría, un explorador para personas ciegas podría ser capaz de leer a través de un documento HTML, interpretar cada etiqueta, y usar voz y énfasis para dar al oyente la comprensión del contenido.

Desafortunadamente, la mayoría de las técnicas que usamos para componer páginas Web son a veces una ruina para la vista.
Por eso no podemos esperar que la interfaz realizada con HTML sea útil para todas las personas que pueden usar el sitio Web de formas diferentes.
Lo más fácil es construir una versión de interfaz lo más sencilla posible, usando solo las etiquetas moldeables de HTML (por eso la parte superior de una interfaz aparece en la parte superior del código, etc.), en las que los usuarios pueden traducir en el formulario que necesitan con su propia tecnología.

En la figura siguiente podemos ver el resultado del siguiente código HTML representado en un explorador.

all the news that’s legible

The Picayune Picayuné

Today’s Headlines: Aug. 25, 2002

Thumbscrew Upsheld by Supreme Court

With only 2 dissenting votes, the Supreme Court taday upheld a lower court ruling that thumb screws are a valid form of corporal punishment in schools.

HTML básico es un sistema elegante de lenguaje de marcas, porque se construye una jerarquía natural.
El énfasis y la estructura se añaden al texto mediante etiquetas.
Aquí, el diseñador ha dado énfasis a la cabecera, usando la etiqueta H1, que representa el tamaño más grande de letra para cabecera.
Algunos exploradores pueden mostrar las etiquetas de cabecera con un tipo de legra de 24 puntos, otros pueden representarlas ligeramente más grandes o más pequeñas, pero el usuario comprenderá la jerarquía de la página basándose en los tamaños relativos de cabeceras y textos.
Un sintetizador de voz puede interpretar fácilmente esta página, leer las cabeceras en una voz grave y pausada, para continuar después el resto del texto con un tono más natural.
El usuario con problemas visuales podría incluso tabular a lo largo de la página, saltando de cabecera en cabecera.

Dar formato a los textos en una Web

sfilippi — Thu, 13 Jun 2013 07:34:01 +0000

Para que una página Web resulte impactante y a la vez atractiva, además de incorporar imágenes expresivas y animaciones llamativas, es importante que la información que contiene sea precisa, que esté bien escrita y que resulte visualmente efectiva.
Si partimos de que el objetivo principal de cualquier sitio Web es transmitir información, es inimaginable concebir un sitio Web sin texto. Independientemente de todo el valor que puedan tener las imágenes, animaciones y sonidos, el hecho es que el texto es tan importante en un sitio Web como puede serlo en cualquier otro medio impreso.
Recuerda que el 90 por ciento de la Web es texto escrito para que se lea, por tanto el objetivo primordial es conseguir que resulte perfectamente legible.
Por otra parte la tipografía y la habilidad para utilizar los tipos de fuente de un modo atractivo y que a la vez lleguen al usuario constituyen uno de los elementos fundamentales a la hora de diseñar una página Web.

Por otra parte, el texto en la Web debe aceptar las limitaciones que imponen los navegadores y cumplir los requisitos de formato de las etiquetas y atributos de HTML, incluso para quienes utilizan las aplicaciones WYSIWYG. Por ello han surgido muchos problemas al intentar trasladar a la Web el nivel de calidad tipográfica que existe en los medios impresos.

Aunque los gráficos para representar textos tienen muchas posibilidades desde el punto de vista estético, existen dos grandes desventajas para su uso en el diseño Web que deberás tener siempre presentes al desarrollar tu trabajo:

Los navegadores no pueden leer la información incluida en las imágenes, por lo que no reconocerán el texto gráfico y los buscadores no detectaran la información recogida en ellos.
En segundo lugar recuerda que el tiempo de descarga de una imagen es mayor, y la mayoría de los usuarios continúan usando conexiones lentas, por tanto puede suceder que muchos usuarios desistan de descargar la página completa sin haber leído la información que querías hacerles llegar.

Los conceptos fundamentales a la hora de trabajar los textos en el diseño de tu web son los siguientes:

Los tipos de letra o fuentes más usadas son Verdana, Arial y Times New Roman.
El tamaño de la letra que se mide en puntos o en porcentaje de pixeles.
El estilo usado que puede ser negrita, cursiva o normal dependiendo del punto que se quiera resaltar.
El interlineado o espacio entre dos líneas de texto que debe ser el óptimo para que el texto se lea bien.
El kerning que es el espacio entre dos caracteres consecutivos cuando se aplica a todo el texto y no solo a dos caracteres se conoce como Tracking.

Diseño Web: Elegir HTML o Editor Visual

sfilippi — Mon, 03 Jun 2013 08:59:07 +0000

El proceso de diseño Web a gran escala involucre la creación y perfeccionamiento de los documentos HTML que conforman un sitio. En los departamentos de producción y desarrollo de las grandes firmas de diseño Web existe personal con amplios conocimientos de HTML y capaz de programar con destreza.
Aunque el HTML básico es fácil de aprender, los editores visuales como Macromedia Dreamweaver, Adobe GoLive y Microsoft FrontPage generan código HTML automáticamente, reduciendo los errores considerablemente y acelerando el proceso de producción.

Las páginas Web se crean generalmente en HTML, pero pueden realizarse programando en HTML directamente o usando un editor visual de los que hemos mencionado.

Como los lenguajes de programación, el código HTML, lleva un proceso de prueba constante.
Si diseñas directamente en HTML, a medida que incorporas los elementos que componen la página debes comprobar los resultados en el navegador, localizar los errores y encontrar soluciones.
Si no obtienes los resultados esperados tendrás que insistir modificando el diseño.

Los editores visuales son programas con una interfaz cómoda y fácil de entender, que brindan la posibilidad de diseñar y editar en un entorno grafico amigable, conservando la opción de editar directamente en código HTML.

Con un editor visual puedes introducir texto, asignarle formatos, alinear párrafos, añadir imágenes, crear enlaces, introducir elementos multimedia y agregar interactividad, comprobando su apariencia y evitando los errores sintácticos sin necesidad de visualizar el código.

El extraordinario avance del entorno digital, el auge de los elementos multimedia, el desarrollo del audio y del video, la inclusión de imágenes 3D y animaciones y la vinculación de bases de datos a los sitios, exige que estos programas posean un gran potencial para crear sitios Web efectivos y espectaculares.

Otra consideración importante es la posibilidad de diseñar en un programa como Flash.
Puedes diseñar en código HTML, en HTLM, con elementos de Flash o directamente en Flash.
HTML es un sólido recurso para añadir texto e imágenes a la Web, pero Flash se ha convertido en una herramienta excelente para desarrollar aplicaciones y contenido para Internet y que además incorpora animaciones y sonido. Debes considerar las ventajas y desventajas de cada alternativa y tus propios conocimientos.

Si HTML descarga primero los textos y luego las imágenes, Flash debe terminar de cargar complemente todo el contenido para poder visualizarlo. HTML, es más fácil de implementar ya que con Flash se requiere de más tiempo y conocimiento de los scripts.
Una desventaja de HTML, es que no se pueden realizar animaciones e incorporar sonido directamente.

Técnicas para conseguir la compatibilidad web

sfilippi — Thu, 14 Mar 2013 16:34:14 +0000

Como ya vimos en un post anterior la compatibilidad web es básica para el diseño web de cara a permitir que los usuarios puedan ver nuestro site desde diferentes navegadores sin problemas.
Pese a que es un tema complicado hay una serie de técnicas que ayudan a mantener una homogeneidad entre los principales navegadores.

• Validar el código de la página web – Validar el código la web en base a los estándares del W3C es una buena técnica. En general consiste en escanear la web en busca de errores de programación y una vez detectados corregirlos. Aparte de detectar errores de codificación, proporciona una breve explicación del error, con lo que se aprenden cosas nuevas. Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones hacerlo manualmente la tarea será difícil y larga.

• Resetar los estilos CSS – Esta técnica es seguramente la más eficaz.
Se trata de borrar o poner a cero, los estilos CSS para evitar (sobre-escribir) los valores de las hojas de estilos de los navegadores.
La solución completa consiste en neutralizar todos los estilos que aplican las hojas de los navegadores y que puedan afectar visualmente a nuestro diseño.
• Esto se puede aplicar por medio de una hoja de estilos completa que podemos importar antes de aplicar nuestros estilos, o bien podemos incluirla directamente en nuestros estilos, pero siempre al principio de la hoja.
Resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar para prevenir el problema de la incompatibilidad entre navegadores, ya que por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados.

• Usa técnicas soportadas – CSS tiene muchas de técnicas para mejorar el aspecto de nuestras páginas web. Lo mejor es intentar evitar el uso de propiedades que puedan causarnos problemas con los navegadores más usados por los visitantes.
Al usar lasbuenas prácticas en CSS minimizamos el riesgo de incompatibilidades entre navegadores.

• Diseñar para Firefox – Una de las cosas que han hecho a Firefox tan popular es que es uno de los más completos navegadores en cuanto a respetar los estándares web se refiere.
Por tanto, diseñando para Firefox estamos minimizando el uso de reglas indebidas o malinterpretadas.

Cómo acelerar tu sitio web

sfilippi — Fri, 08 Mar 2013 10:13:26 +0000

Que un sitio web se cargue rápido o no es importante no sólo para los internautas que lo visitan sino también para el resultado de las búsquedas.
Uno de los factores que los buscadores (y en concreto Google) dan importancia es la velocidad de carga de las páginas web.
La pregunta entonces es: cómo conseguir que nuestra página web sea más rápida?

A continuación te damos algunos consejos básicos.

1. Comprimir los archivos estáticos: Los archivos estáticos como css, javascripts o html utilizan mucho espacio en blanco y saltos de línea.
Pese a que es necesario para hacer cambios, estos bloques de espacio en blanco aumentan el tiempo de carga.
Para solventarlo hay que minimizarlos, es decir, comprimir los espacios y saltos de línea al máximo para que así el fichero ocupe menos y se cargue antes.

2. Utilizar el formato correcto de las imágenes: Para optimizar el peso de los ficheros sin perder calidad de imagen hay que usar el formato correcto.
Si la imagen no lo requiere hay que evitar usar formatos que ocupan mucho.

3. Cargar los Javascripts a la fin del documento: Para que la página funcione mejor, es importante cargar los javascripts siempre al final de un documento y no en su comienzo.
Ello permite al navegador procesar todo el contenido anterior antes de empezar con javascript.

4. No redimensionar imágenes en HTML: Si tienes imagen original de 1200×900 píxeles pero la quieres ver en 400×180 no hay que redimensionarla usando HTML.
Hay que simplemente reducir el tamaño con un editor de imágenes como por ejemplo Photoshop.

5. Escoger adecuadamente el proveedor de Hosting: Buena parte del rendimiento de una página web depende del hosting.
¿Está bien optimizados para rendir al máximo?
Hay que elegir un proveedor que sea fácil de usar y con al que podamos sacar todo el jugo.

Como elegir un servidor

sfilippi — Wed, 06 Feb 2013 10:08:18 +0000

Todos hemos oído hablar de servidores y tenemos una idea más o menos clara de lo que son.
A grosso modo, un servidor es un gran ordenador conectado las 24 horas del día de forma ininterrumpida.
Este super ordenador tiene un disco duro enorme, un montón de megas de Ram y una velocidad bastante alta para internet.
Cuando una persona visita cualquier web, en realidad lo que está haciendo es acceder a uno de esos grandes ordenadores, concretamente al que alberga esa web en su gran disco duro.
Cuando un servidor como por ejemplo Wanadoo te ofrece un espacio de X megas para la página web, en realidad te está dejando X megas de su disco duro para que tú metas los archivos de tu web.
Una vez sabemos qué es un servidor y su vital importancia la pregunta es : y cual escoger?

Los puntos a tener en cuenta para decidirte por uno u otro son:

El espacio web que te ceden: la cantidad máxima en megas que el servidor te cede para alojar todos los archivos de tu web (páginas, imágenes, sonidos…).
Si permite administrar los archivos por FTP. El modo más cómodo es subir y bajar los archivos con FTP. Algunos servidores no lo tienen, y hay que hacerlo a través de su portal lo cual es más pesado.
La publicidad. Es el precio “a pagar” por un servicio gratuito. En algunos casos apenas molesta pero en otros casos es muy abundante. Esta es la causa más crítica por las que la gente se decide por uno u otro servidor. Lógicamente los de pago no tienen propaganda.
El tipo de dirección (también se llama URL) que te ofrecen para la pagina web. En función del servidor escogido, la dirección puede ser corta o extremadamente larga lo cual es importante para que los visitantes puedan entrar fácilmente.
Lenguajes que soporta. Por supuesto, todos soportan Html y CSS, pero algunos además admiten PHP, ASP, extensiones de Frontpage, CGI….

La compatibilidad web

sfilippi — Thu, 10 Jan 2013 13:59:20 +0000

http://www.browsershots.org/

Uno de los mayores problemas y quebradores de cabeza en el diseño web actualmente es la compatibilidad web.
Que una web sea compatible con todos los navegadores significa que se vea igual (o de manera parecida) en todos ellos.
Para empezar hay que apuntar que ello es muy difícil, y en general si conseguimos que se vea igual de bien en todos los navegadores importantes (Explorer, Firefox, Opera, Safari y Mozilla) ya podemos estar contentos.
Hay que tener en cuenta que estos 5 navegadores copan la gran mayoría de usuarios de la red.

Pero, ¿por qué es tan difícil conseguir la compatibilidad web?

El problema principal es que no todos los navegadores interpretan en código HTML y CSS de la misma forma.
Existen pequeñas variaciones entre ellos que son las que hacen que el resultado no sea el mismo de unos a otros.
Algunas de esas diferencias pueden llegar a ser tan importantes que hacen que partes de tu web no funcione o no se vea en condiciones.
Seguramente nos habremos encontrado alguna vez con ello y es un verdadero problema.

Como el propósito de una web es que la pueda disfrutar el mayor número de personas (y que éstas la vean correctamente), nos interesa que la web funcione en el mayor número de navegadores posibles.
Por lo tanto, a la hora de hacer una página web no es suficiente con preocuparse por la audiencia adecuada, o registrar un buen nombre de dominio o tener un diseño agradable al usuario.
Todo esto puede resultar insignificante si un usuario no ve la página correctamente al entrar con un navegador que no has tenido en cuenta al crearla.

¿Qué hacer para conseguir optimizar la compatibilidad web?

Pese a que es un tema espinoso hay diferentes técnicas relativamente simples.
Entre ellas cabe destacar el validar el código de tu sitio web, resetear los estilos CSS, usar técnicas soportadas o intentar diseñar con Firefox.

Hablaremos de todas ellas al detalle próximamente en un nuevo post.

¿Cómo puedo redireccionar páginas Web sin usar htaccess?

sfilippi — Mon, 01 Mar 2010 10:00:03 +0000

Pregunta: Tengo una cuenta de hosting compartida, pero acabo de descubrir que el servicio de creación de archivos .htaccess está deshabilitado. ¿Cómo puedo redireccionar páginas?

Respuesta: En primer lugar, no es muy buena señal que tu compañía de servicios de hosting haya deshabilitado .htcaccess. Por un lado, deberías plantearte si realmente te conviene seguir con esta compañía, sin embargo, si crees que no es momento adecuado para este cambio, puedes usar PHP para redireccionar páginas.

Para redireccionar con PHP, deberás reemplazar el código del archivo que quieres redireccionar con este script:

Obviamente, tendrás que sustituir la dirección Web por la que a ti te convenga. Y eso es todo, así de fácil. Asegúrate de que has borrado todo el texto que había y que no quede nada antes del script añadido. Ten en cuenta que ni siquiera podrás dejar código HTML. Una vez realices este cambio, todos los visitantes que se dirijan a la Web en al que editaste el código, serán redireccionados a la Web especificada en el campo “Location”.

¿Cómo crear plantillas CSS y HTML sin saber nada de programación? Utiliza Drawter

sfilippi — Mon, 08 Feb 2010 21:25:39 +0000

A continuación, os dejo los pasos a seguir para crear código CSS o HTML con Drawter:

1. Entra en la Web de Drawter y selecciona el modo de navegación “Draw”. Dibuja un rectángulo (nodo) con las dimensiones que elijas.

2. Selecciona los elementos de la barra de herramientas del lado y elije los parámetros básicos de la página que vas a crear. Luego dale un título apropiado, selecciona el tipo de documento y el idioma de la Web.

3. Para añadir contenido a la caja que hemos creado, selecciona “Edit” y luego haz click sobre el rectángulo. Verás aparecer una caja de contenido donde podrás escribir lo que quieras.

4. Si quieres insertar enlaces, selecciona “a” en el menú desplegable. Del mismo modo, para añadir cabeceras H1, selecciona H1 desde el mismo menú.

Para darle estilo al bloque HTML, elije la fuente y el tamaño de la letra, el color y el fondo. También puedes usar una imagen de fondo añadiendo la URL de la imágen en el campo “Background image”.

5. Añade los parámetros de estilo que quieras desde el bloque “Other box styles”. Tienes gran variedad de propiedades entre las que elegir, así que tendrás que exprimir un poco tu creatividad en este paso.

6. Cuando termines, haz click sobre “Generate Code” desde el menú de navegación. Drawter creará el código HTML y CSS completo para el bloque que acabas de diseñar.

7. Cuando tengas todo el código de cada uno de los bloques que quieres añadir a tu blog o página Web, sólo tienes que pegarlo antes de la etiqueta de CSS. En cambio, si se trata de una página HTML, pégalo después de la etiqueta .

Si tienes cualquier duda, no te cortes y déjanos tus comentarios.

Vía | www.techie-buzz.com

¿Qué plantilla elijo para mi página Web?

sfilippi — Tue, 05 Jan 2010 15:33:54 +0000

Si has decidido armarte de valor y crear tu propia página Web profesional, puede que estés en la fase en la que debes elegir una plantilla adecuada que se ajuste a los contenidos y a la imagen que quieres dar. Este es uno de los pasos que más cuesta decidir, así que os traigo una breve lista de consejos que pueden ayudaros a elegir de forma correcta:

Código: Ten en cuenta que una página en HTML o CSS válida se mostrará adecuadamente en cualquier máquina de tus visitantes, además no tendrá problemas de carga a causa de errores de programación. De hecho, yo te aconsejaría que prefirieras emplear plantillas en CSS en lugar de tablas. Las tablas sirven para almacenar datos, sin embargo, cuando se utilizan para crear diseños, el código puede ser válido, pero las páginas tardarán mucho más en cargarse.
Apariencia: Una plantilla de calidad debería ser una obra de arte. Los colores deben ser complementarios y, al mismo tiempo, guiar al usuario atrayendo su atención sobre los contenidos más importantes.
Función: Recuerda que una página Web debe ser funcional para tus visitantes y para ti mismo. La navegación tiene que ser intuitiva, la página debe ser leíble con resoluciones normales, y el diseño debe facilitar el escaneo rápido de los contenidos. Además, ten en cuenta que cualquier página Web tiene que darte la opción de modificarla fácilmente, tanto los contenidos como su apariencia.

Espero que estos consejos te puedan ayudar a diferenciar entre plantillas mediocres y aquellas que tienen gran potencial. Después de todo, acertar el diseño y la codificación de tu página Web puede ser determinante para su éxito y te ahorrara mucho tiempo a la larga. Hace poco, vimos algunas páginas de recursos que ofrecen galerías de plantillas CSS y HTML totalmente gratis, no dudes en echarle un vistazo. ¡Mucha suerte y paciencia en la búsqueda!

Fotografía | www.flickr.com