Estandares de diseño web

23,000 views

Published on

Son ciertas pautas que se establecen para conseguir uniformidad en el desarrollo de páginas web.

Published in: Technology
1 Comment
23 Likes
Statistics
Notes
No Downloads
Views
Total views
23,000
On SlideShare
0
From Embeds
0
Number of Embeds
192
Actions
Shares
0
Downloads
0
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

Estandares de diseño web

  1. 1. <ul><li>Son ciertas pautas que se establecen para conseguir uniformidad en el desarrollo de páginas web. </li></ul><ul><li>Actualmente W3C es quien está estableciendo estándares para conseguir sitios web más óptimos y con un mejor desempeño. </li></ul>
  2. 2. <ul><li>Lo que se pretende con la implementación de estándares es conseguir que la mayoría de usuarios vean lo que se publica, para esto u n sitio web debe anticiparse a las posibles diferencias de acceso de los visitantes. </li></ul>
  3. 3. <ul><li>Conseguir que las páginas se desplieguen de manera rápida. </li></ul><ul><li>Lograr que las páginas se visualicen como sus autores las han construido </li></ul>
  4. 4. <ul><li>El visitante gasta más tiempo en la descarga lo que en la mayoría de ocasiones causa el abandono del sitio web sin verlo </li></ul><ul><li>Gasta mas ancho de banda lo que genera un costo adicional </li></ul><ul><li>Inaccesibilidad a cierto tipos de usuarios </li></ul><ul><li>Se ve bien sólo en los navegadores más populares </li></ul>
  5. 5. <ul><li>Las páginas web funcionarán en todo tipo de navegadores , plataformas y dispositivos </li></ul><ul><li>Sitios más accesibles a los diferentes tipos de visitantes, especialmente para los que tienen necesidades especiales </li></ul><ul><li>Velocidad en cargar las páginas </li></ul><ul><li>Disminución del ancho de banda utilizado </li></ul><ul><li>Disminución de costes </li></ul>
  6. 6. <ul><li>Lo que se quiere conseguir con estas prácticas es asegurar que el visitante tenga una experiencia agradable. </li></ul><ul><li>Aspectos a tener en cuenta: </li></ul><ul><ul><li>Peso de las páginas </li></ul></ul><ul><ul><li>Diagramación de las páginas </li></ul></ul><ul><ul><li>En el caso de utilizar Flash </li></ul></ul><ul><ul><li>Tratar de no utilizar frames o marcos </li></ul></ul><ul><ul><li>Uso de meta tags adecuados </li></ul></ul><ul><ul><li>Visualizar la página en un navegador de texto </li></ul></ul><ul><ul><li>Utilizar XHTML+CSS bajo estándar W3C </li></ul></ul>
  7. 7. <ul><li>Teniendo en cuenta el caso más extremo que es acceso a internet por modem vemos que: </li></ul><ul><ul><li>Si un módem transmite a 56 kbps (kilobits por segundo) significa que por cada segundo de transmisión, en condiciones ideales, es capaz de descargar 7 kb (kilobytes) de información. </li></ul></ul><ul><ul><li>Si una página pesa 70 kb, en condiciones ideales demorará 10 segundos en aparecer completa en el computador del usuario. </li></ul></ul><ul><ul><li>Aunque no hay información técnica consistente para establecer la velocidad promedio de un módem, puesto que depende de diversas variables técnicas, la experiencia indica que éstos se conectan habitualmente a la mitad de su valor declarado. Entre las variables que afectan la calidad de la conexión se cuentan la capacidad del computador, la congestión de las redes y el nivel de visitas del servidor, entre otras. </li></ul></ul><ul><ul><li>Dado lo anterior, la página de 70 kb señalada en el ejemplo anterior, tardaría 20 segundos en desplegarse completamente. </li></ul></ul><ul><li>Las normas internacionales al respecto indican que un usuario no esperará más de: </li></ul><ul><ul><li>5 segundos para que aparezca algo visible en la pantalla </li></ul></ul><ul><ul><li>10 segundos para que aparezca algo legible en la pantalla </li></ul></ul><ul><ul><li>30 segundos hasta hacer un click hacia otra parte del sitio o hacia otro sitio </li></ul></ul>
  8. 8. <ul><li>Actualmente gracias a las CSS la diagramación de las páginas es mejor efectuarla por capas, ya sea modularmente o utilizando herramientas como Smarty </li></ul><ul><li>Es importante utilizar ciertos patrones de distribución ya que los usuarios suelen utilizar ciertos hábitos de recorrido de las páginas web </li></ul>
  9. 9. <ul><li>Evitar el uso de Flash en la portada </li></ul><ul><ul><li>Una de las razones es que impide el acceso de robots para ser indexada por buscadores </li></ul></ul><ul><ul><li>La utilización de este recurso aumenta a gran escala el del sitio web </li></ul></ul><ul><ul><li>Si se utiliza colocar un link para saltarse la intro y otro para conseguir el plug-in </li></ul></ul><ul><li>Colocar una imagen en tal caso de que la presentación flash no cargue </li></ul>
  10. 10. <ul><li>Positivos: </li></ul><ul><ul><li>Permite tener ciertos contenidos presentes todo el tiempo, como un cabezal o menú. </li></ul></ul><ul><ul><li>Facilita la navegación ya que el usuario nunca pierde de vista dónde se encuentra. </li></ul></ul><ul><li>Estos aspectos se pueden conseguir con diagramación con CSS </li></ul><ul><li>Negativos: </li></ul><ul><ul><li>Impide que el usuario pueda marcar una página como favorita (bookmark) porque nunca se le muestra cuál es su dirección web. </li></ul></ul><ul><ul><li>Cuando un usuario llega a un contenido desde un enlace provisto por un buscador, verá el sitio sin los otros marcos y no sabrá cómo navegar en él. </li></ul></ul><ul><ul><li>La existencia de varios archivos en uno genera una carga mayor para el usuario que llega al sitio; eso lo obliga a esperar a que aparezcan todos los contenidos de los archivos para poder usarlo. </li></ul></ul>
  11. 11. <ul><li>Los meta tags son marcas en lenguaje HTML que van en la parte superior del código fuente de cada página, a través de las cuales se entrega a los sistemas de indexación y búsqueda, la información mínima para hacer una correcta interpretación del contenido que incluye. </li></ul><ul><li>Ej: </li></ul><ul><li><title>Nombre del Sitio o Institución</title> </li></ul><ul><li><meta name=&quot;title&quot; content=&quot;Nombre del Sitio o Institución&quot;> </li></ul><ul><li><meta name=&quot;description&quot; content=&quot;Descripción del Sitio o Institución&quot;> </li></ul><ul><li><meta name=&quot;keywords&quot; content=&quot;Palabras claves del Sitio o Institución&quot;> </li></ul>
  12. 12. <ul><li>Gracias al uso de XHTML para el contenido y CSS para la apariencia, se pueden transformar rápidamente un sitio sin importar que se trate de una página Web o miles, realizando cambios en un solo lugar. </li></ul><ul><li>Los documentos que separan apariencia de contenido usan menos código, pues optimizan su estructura y funcionalidad. </li></ul><ul><li>Cumplir con el estándar XHTML te abrirá la puerta a diseñar páginas web para dispositivos móviles o nuevas tecnologías que vayan surgiendo. </li></ul>
  13. 13. <ul><li>Se pretende conseguir que todos los documentos web sean compatibles en cualquier navegador. </li></ul><ul><li>Utilizar XHTML+CSS ayuda a mejorar la manera de diseñar una pagina, consiguiendo que el código de sea más limpio y claro. </li></ul><ul><li>Los documentos basados en XHTML válido son más relevantes para los motores de búsqueda, contienen mayor información y menos código, por lo que un sitio basado en estándares Web tendrá una mejor posición dentro de los servicios de la red. </li></ul>
  14. 14. <ul><li>Todavía queda mucho por hacer para &quot;Guiar la Web hacia su máximo potencial“ </li></ul><ul><li>Las empresas, instituciones académicas e instituciones gubernamentales deben trabajar estandarización obligatoriamente </li></ul><ul><li>Estamos viviendo una &quot;segunda&quot; revolución Web </li></ul><ul><li>Un sitio basado en estándares Web es más accesible, permitiendo a personas con discapacidades utilizar su contenido. </li></ul>

×