El uso de estándares ayuda a que tu sitio web sea: Tenga mejor indexación en los buscadores Portabilidad Interoperabilidad Accesible
Son tecnologías, establecidas por el W3C, usadas para crear e interpretar el contenido basado en web, de tal manera que estos documentos estén siempre disponibles y accesibles para todos.
 
Tener un mayor conocimiento y reconocimiento de que la información es publicada por ESPOL. Generar confianza de los diferentes visitantes que tienen los sitios web de ESPOL.
Todo sitio web que publique información que se encuentre relacionada de alguna manera u otra a la ESPOL debe tener registrada un subdominio de la dirección espol.edu.ec
Se aplica para todas las facultades, institutos de ciencias, institutos de tecnologías, escuelas, centros de investigación, centros de vínculos con la comunidad, centros de apoyo administrativo/financiero y gestión, centros de apoyo académico, fundaciones, eventos nacionales e internacionales, federaciones de estudiantes, asociaciones estudiantiles y cualquier otra agrupación que por la naturaleza de sus actividades tenga un vinculo directo con la ESPOL.
 
Accesibilidad Web busca que personas con algún tipo de discapacidad puedan hacer uso de la web. Tener mi sitio disponible para que un nuevo universo de potenciales usuarios tengan acceso a mi web. En Ecuador el 12% de la población presenta algún tipo de discapacidad.
No, también se benefician las personas sin discapacidad Flexibilidad es un principio básico, satisfacer diferentes necesidades, situaciones y preferencias. Flexibilidad beneficia a todos, ejemplo usuarios con conexión lenta, personas con incapacidad transitoria, personas de edad avanzada, etc.
El término interoperabilidad se refiere a que nuestro sitio web puede ser utilizado desde cualquier sistema operativo, haciendo usado de cualquier browser. Por ejemplo Firefox desde Linux, Safari desde MaC OS, Internet Explorer desde Windows, etc.
La usabilidad se refiere principalmente a la experiencia del usuario en el sitio web. Anticipar las situaciones que podrían ocurrir cuando los usuarios naveguen en nuestro sitio es un buen punto de partida.
Anticipación Autonomía Consistencia Eficiencia Ley de Fitts Legibilidad Interfaz visible Navegabilidad
 
TOM y SOM Proveer al usuario una interfaz común y fácil de navegar. Proveer a los buscadores las facilidades necesarias para una correcta indexación de nuestros sitios. Facilidad de mantenimiento
 
Son tecnologías establecidas por el W3C y otros grupos, y son utilizadas para crear e interpretar el contenido web. XHTML 1.0 o superior CSS nivel 1 y nivel 2 DOM ECMAScript 262 (conocido en la actualidad como javascript)
Una página web bien estructurada debe tener los siguientes capas: HTML Semántico (Contenido) CSS (Presentación) Javascript (Comportamiento) Cada uno de estos componentes deben estar en un archivo separado.
Un documento web cumple con estándar si: Tiene un HTML o XHTML válido Usa CSS en lugar de tablas para manejar layout Está correctamente estructurado y posee un markup semántico Funciona en todos los browsers
NO. “Los diseñadores tienden a pensar que a la mayoría de la gente les gustan los sitios que sean visualmente interesantes porque precisamente a ellos les gustan los sitios así. Por eso quieren hacer sitios que visualmente sean muy atractivos” Steve Krug.
Flash sirve para: Videos, juegos, aplicaciones, publicidad, etc Flash no sirve para: Sitios 100% Flash Menues
Tiene un montaje más rápido. Fácil mantenimiento, menor costo de mantenimiento. Diseño centralizado Compatibilidad con todos los browsers Se descarga y presenta más rápidamente Menor costo de ancho de banda
Mayor accesibilidad, mejor experiencia del usuario Mejor posicionamiento en los buscadores. Mayor cantidad de usuarios que pueden acceder a nuestro sitio.
http://www.csszengarden.com http://www.alistapart.com/ http://validator.w3.org/ http://validator.w3.org/feed/ http://jigsaw.w3.org/css-validator
La página web debe tener tener el tag <title> Debe poseer uso adecuado de headers <h1>, <h2>, etc Uso de metatags description, keywords Uso de archivo favicon.ico Especificar fuentes rss como tag rel
 
No usar tablas para manejar el layout en su lugar hacer un correcto uso de los layers <div> Las tablas solo deben ser utilizadas para mostrar datos tabulares. Las imágenes deben tener usar el tag de texto alternativo alt=“texto alternativo”
Heading <h1></h1>, <h2></h2>, … Párrafos <p>Texto del párrafo</p> Hipervínculos <a href=“…” >Texto</a> Imágenes <img src=“…” alt=“…”/> Listas no ordenadas <ul> … </ul> Listas ordenadas <ol> … </ol> Elementos de una lista <li> … </li>
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> Un documento xhtml debe contener un doctype que puede ser (transitional, frameset o strict)
Todos los tags xhtml deben estar con minúsculas Debe cerrar todos los tags abiertos. <li> Elemento 1 (incorrecto) <li>Elemento 1</li> (correcto) <br /> <img src=“…” alt=“…” />
Uso correcto de javascripts Uso correcto de links
La página debe ser optimizada para 1024 pixeles por 768 pixeles como resolución mínima El ancho de la página debe ser de hasta 900 pixeles Fuentes Rss Mapa del Sitio Estructura de Navegación
Adicionalmente un sitio web debe tener una sólida estructura.
Un sitio web está formado por diversos componentes, unos pocos son visibles para el usuario pero la gran mayoría no lo son.
 
 
“ Es la sensación, sentimiento, respuesta emocional, valoración y satisfacción del usuario respecto a un producto, resultado del fenómeno de interacción con el producto y la interacción con su proveedor” Hassan y Martin
 
Como llega nuestro usuario a nosotros Motores de Búsqueda Enlaces Tráfico Directo
Es un componente que aporta a que nuestro sitio sea amigable pero no es imprescindible.
Con respecto a la arquitectura de la información hay que tomar en cuenta lo siguiente: Organizar y clasificar el contenido Definir una estructura de navegación Señalización Búsqueda
Al tomar en cuenta la interacción con el usuario se debe definir los procesos mediante los cuales el usuario va a interactuar con nuestro sitio. Estas interacciones deben ser para el usuario fáciles de recordar, y utilizar.
Medir la usabilidad de nuestros sitios debería convertirse en un proceso periódico para una mejora continua de nuestro sitio web. Deben realizarse constantes pruebas con usuarios, pruebas heurísticas.
La accesibilidad se refiere a que nuestro sitio web debe poder ser visitado desde cualquier lugar del  mundo independiente del hardware, software, red, idioma, cultura, ubicación geográfica y capacidades de los usuarios.
Además de IE, Firefox nuestro sitio web debe poder ser interpretado por: Dispositivos especiales (lectores de pantalla, navegadores solo texto) Móviles y Smartphones Buscadores
“ El poder de la Web está en su universalidad. Un acceso a la web para todos independientemente de su discapacidad”  Tim Berners- Lee
Finalmente nuestro usuario más importante es ciego…
“ La mitad de las visitas a tu sitio vienen de  G o o g l e , y  G o o g l e  sólo ve lo que un ciego puede ver. Si tu sitio no es accesible, tendrás menos visitas” Pemberton
http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php http://webwait.com http://www.websitegrader.com/ http://developers.evrsoft.com/seotool/ http://www.domaintools.com/seo-score/ http://www.accesible.com.ar/examinator/
http://www.w3c.es http://www.webusable.com http://www.w3.org/ http://www.estandaresyaccesibilidad.com/ Sitios Exitosos: De los estándares web a la experiencia de usuario (Gabriel Porras)

Estándares Web

  • 1.
  • 2.
    El uso deestándares ayuda a que tu sitio web sea: Tenga mejor indexación en los buscadores Portabilidad Interoperabilidad Accesible
  • 3.
    Son tecnologías, establecidaspor el W3C, usadas para crear e interpretar el contenido basado en web, de tal manera que estos documentos estén siempre disponibles y accesibles para todos.
  • 4.
  • 5.
    Tener un mayorconocimiento y reconocimiento de que la información es publicada por ESPOL. Generar confianza de los diferentes visitantes que tienen los sitios web de ESPOL.
  • 6.
    Todo sitio webque publique información que se encuentre relacionada de alguna manera u otra a la ESPOL debe tener registrada un subdominio de la dirección espol.edu.ec
  • 7.
    Se aplica paratodas las facultades, institutos de ciencias, institutos de tecnologías, escuelas, centros de investigación, centros de vínculos con la comunidad, centros de apoyo administrativo/financiero y gestión, centros de apoyo académico, fundaciones, eventos nacionales e internacionales, federaciones de estudiantes, asociaciones estudiantiles y cualquier otra agrupación que por la naturaleza de sus actividades tenga un vinculo directo con la ESPOL.
  • 8.
  • 9.
    Accesibilidad Web buscaque personas con algún tipo de discapacidad puedan hacer uso de la web. Tener mi sitio disponible para que un nuevo universo de potenciales usuarios tengan acceso a mi web. En Ecuador el 12% de la población presenta algún tipo de discapacidad.
  • 10.
    No, también sebenefician las personas sin discapacidad Flexibilidad es un principio básico, satisfacer diferentes necesidades, situaciones y preferencias. Flexibilidad beneficia a todos, ejemplo usuarios con conexión lenta, personas con incapacidad transitoria, personas de edad avanzada, etc.
  • 11.
    El término interoperabilidadse refiere a que nuestro sitio web puede ser utilizado desde cualquier sistema operativo, haciendo usado de cualquier browser. Por ejemplo Firefox desde Linux, Safari desde MaC OS, Internet Explorer desde Windows, etc.
  • 12.
    La usabilidad serefiere principalmente a la experiencia del usuario en el sitio web. Anticipar las situaciones que podrían ocurrir cuando los usuarios naveguen en nuestro sitio es un buen punto de partida.
  • 13.
    Anticipación Autonomía ConsistenciaEficiencia Ley de Fitts Legibilidad Interfaz visible Navegabilidad
  • 14.
  • 15.
    TOM y SOMProveer al usuario una interfaz común y fácil de navegar. Proveer a los buscadores las facilidades necesarias para una correcta indexación de nuestros sitios. Facilidad de mantenimiento
  • 16.
  • 17.
    Son tecnologías establecidaspor el W3C y otros grupos, y son utilizadas para crear e interpretar el contenido web. XHTML 1.0 o superior CSS nivel 1 y nivel 2 DOM ECMAScript 262 (conocido en la actualidad como javascript)
  • 18.
    Una página webbien estructurada debe tener los siguientes capas: HTML Semántico (Contenido) CSS (Presentación) Javascript (Comportamiento) Cada uno de estos componentes deben estar en un archivo separado.
  • 19.
    Un documento webcumple con estándar si: Tiene un HTML o XHTML válido Usa CSS en lugar de tablas para manejar layout Está correctamente estructurado y posee un markup semántico Funciona en todos los browsers
  • 20.
    NO. “Los diseñadorestienden a pensar que a la mayoría de la gente les gustan los sitios que sean visualmente interesantes porque precisamente a ellos les gustan los sitios así. Por eso quieren hacer sitios que visualmente sean muy atractivos” Steve Krug.
  • 21.
    Flash sirve para:Videos, juegos, aplicaciones, publicidad, etc Flash no sirve para: Sitios 100% Flash Menues
  • 22.
    Tiene un montajemás rápido. Fácil mantenimiento, menor costo de mantenimiento. Diseño centralizado Compatibilidad con todos los browsers Se descarga y presenta más rápidamente Menor costo de ancho de banda
  • 23.
    Mayor accesibilidad, mejorexperiencia del usuario Mejor posicionamiento en los buscadores. Mayor cantidad de usuarios que pueden acceder a nuestro sitio.
  • 24.
    http://www.csszengarden.com http://www.alistapart.com/ http://validator.w3.org/http://validator.w3.org/feed/ http://jigsaw.w3.org/css-validator
  • 25.
    La página webdebe tener tener el tag <title> Debe poseer uso adecuado de headers <h1>, <h2>, etc Uso de metatags description, keywords Uso de archivo favicon.ico Especificar fuentes rss como tag rel
  • 26.
  • 27.
    No usar tablaspara manejar el layout en su lugar hacer un correcto uso de los layers <div> Las tablas solo deben ser utilizadas para mostrar datos tabulares. Las imágenes deben tener usar el tag de texto alternativo alt=“texto alternativo”
  • 28.
    Heading <h1></h1>, <h2></h2>,… Párrafos <p>Texto del párrafo</p> Hipervínculos <a href=“…” >Texto</a> Imágenes <img src=“…” alt=“…”/> Listas no ordenadas <ul> … </ul> Listas ordenadas <ol> … </ol> Elementos de una lista <li> … </li>
  • 29.
    <!DOCTYPE html PUBLIC&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> Un documento xhtml debe contener un doctype que puede ser (transitional, frameset o strict)
  • 30.
    Todos los tagsxhtml deben estar con minúsculas Debe cerrar todos los tags abiertos. <li> Elemento 1 (incorrecto) <li>Elemento 1</li> (correcto) <br /> <img src=“…” alt=“…” />
  • 31.
    Uso correcto dejavascripts Uso correcto de links
  • 32.
    La página debeser optimizada para 1024 pixeles por 768 pixeles como resolución mínima El ancho de la página debe ser de hasta 900 pixeles Fuentes Rss Mapa del Sitio Estructura de Navegación
  • 33.
    Adicionalmente un sitioweb debe tener una sólida estructura.
  • 34.
    Un sitio webestá formado por diversos componentes, unos pocos son visibles para el usuario pero la gran mayoría no lo son.
  • 35.
  • 36.
  • 37.
    “ Es lasensación, sentimiento, respuesta emocional, valoración y satisfacción del usuario respecto a un producto, resultado del fenómeno de interacción con el producto y la interacción con su proveedor” Hassan y Martin
  • 38.
  • 39.
    Como llega nuestrousuario a nosotros Motores de Búsqueda Enlaces Tráfico Directo
  • 40.
    Es un componenteque aporta a que nuestro sitio sea amigable pero no es imprescindible.
  • 41.
    Con respecto ala arquitectura de la información hay que tomar en cuenta lo siguiente: Organizar y clasificar el contenido Definir una estructura de navegación Señalización Búsqueda
  • 42.
    Al tomar encuenta la interacción con el usuario se debe definir los procesos mediante los cuales el usuario va a interactuar con nuestro sitio. Estas interacciones deben ser para el usuario fáciles de recordar, y utilizar.
  • 43.
    Medir la usabilidadde nuestros sitios debería convertirse en un proceso periódico para una mejora continua de nuestro sitio web. Deben realizarse constantes pruebas con usuarios, pruebas heurísticas.
  • 44.
    La accesibilidad serefiere a que nuestro sitio web debe poder ser visitado desde cualquier lugar del mundo independiente del hardware, software, red, idioma, cultura, ubicación geográfica y capacidades de los usuarios.
  • 45.
    Además de IE,Firefox nuestro sitio web debe poder ser interpretado por: Dispositivos especiales (lectores de pantalla, navegadores solo texto) Móviles y Smartphones Buscadores
  • 46.
    “ El poderde la Web está en su universalidad. Un acceso a la web para todos independientemente de su discapacidad” Tim Berners- Lee
  • 47.
    Finalmente nuestro usuariomás importante es ciego…
  • 48.
    “ La mitadde las visitas a tu sitio vienen de G o o g l e , y G o o g l e sólo ve lo que un ciego puede ver. Si tu sitio no es accesible, tendrás menos visitas” Pemberton
  • 49.
    http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php http://webwait.com http://www.websitegrader.com/http://developers.evrsoft.com/seotool/ http://www.domaintools.com/seo-score/ http://www.accesible.com.ar/examinator/
  • 50.
    http://www.w3c.es http://www.webusable.com http://www.w3.org/http://www.estandaresyaccesibilidad.com/ Sitios Exitosos: De los estándares web a la experiencia de usuario (Gabriel Porras)