Semana II

Taller de Desarrollo Web

Inicio 10 minutos:
La semana pasada estuvimos hablando respecto a una serie de conceptos tcnicos asociados a Internet y a como esta funciona. Adems vimos el como registrar un nombre de dominio y como funcionan los Servidores de Nombres de Dominio y la tecnologa base para que funcione Internet y sus servicios.

Resumen semana anterior

Al trmino de la semana 10 minutos:

Esta semana conocers algunos conceptos bsicos respecto al funcionamiento de los servidores en la web y de como la tecnologa web funciona.

: ido s n nte inuto o o: C m oy 5 p 22 ea d to. al i s r e u te rop a. M a P T. p d io 2 P ercic guia j a 1 E ctic r 1P

Aprendizajes esperados

Trminos importantes para construir sitios Web.

Usabilidad.
La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interacta con un producto o sistema. Esto se mide a travs del estudio de la relacin que se produce entre las herramientas (entendidas en un sitio web como el conjunto integrado por el sistema de navegacin, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a travs de ellas. El experto en el tema, Jakob Nielsen desarroll la siguiente pauta para mejorar la usabilidad:

Usabilidad

Visibilidad del estado del sistema: el sistema siempre debera mantener informados a los usuarios de lo que est ocurriendo, a travs de retroalimentacin apropiada dentro de un tiempo razonable. Relacin entre el sistema y el mundo real: el sistema debera hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares, ms que con trminos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la informacin aparezca en un orden natural y lgico. Control y libertad del usuario: hay ocasiones en que los usuarios elegirn las funciones del sistema por error y necesitarn una salida de emergencia claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer. Consistencia y estndares: los usuarios no deberan cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.

Prevencin de errores: mucho mejor que un buen diseo de mensajes

de error es realizar un diseo cuidadoso que prevenga la ocurrencia de problemas. Reconocimiento antes que recuerdo : se deben hacer visibles los objetos, acciones y opciones, El usuario no tendra que recordar la informacin que se le da en una parte del proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fcilmente recuperables cuando sea necesario. Flexibilidad y eficiencia de uso: La presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interaccin ms rpida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapte el sistema para usos frecuentes.

Accesibilidad

Esttica y diseo minimalista: los dilogos no deben contener informacin que es irrelevante o poco usada. Cada unidad extra de informacin en un dilogo, compite con las unidades de informacin relevante y disminuye su visibilidad relativa.

Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: Los mensajes de error se deben entregar en un lenguaje claro
y simple, indicando en forma precisa el problema y sugerir una solucin constructiva al mismo. Ayuda y documentacin: incluso en los casos en que el sistema pueda ser usado sin documentacin, podra ser necesario ofrecer ayuda y documentacin. Dicha informacin debera ser fcil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.
(http://www.guiaweb.gob.cl/guia-v2/capitulos/05/usabilidad.htm, 2011)

Accesibilidad:
La accesibilidad Web significa que personas con algn tipo de discapacidad van a poder hacer uso de la web. Ya que el software tiene un papel importante en la accesibilidad de la web, es importante que ayude a los desarrolladores a generar y evaluar sitios web accesibles para

que las personas con discapacidad puedan utilizarlos. La Web Accessibility Initiative (WAI) entrega una serie de lineamientos que ayudan en este sentido, como por ejemplo: Imgenes y animaciones: Use el atributo "alt" para describir la funcin de cada elemento visual. Mapas de imagen: Use el elemento "map" y texto para las zonas activas.

Multimedia: Proporcione subttulos y transcripcin del sonido, y descripcin del video.

Internacionalizacin

Enlaces de hipertexto: Use texto que tenga sentido ledo fuera de contexto. Por ejemplo, evite "pincha aqu". Organizacin de las pginas: Use encabezados, listas y estructura consistente. Use CSS para la maquetacin donde sea posible. Figuras y diagramas: Descrbalos brevemente en la pgina o use el atributo longdesc. Scripts, applets y plug-ins: Ofrezca contenido alternativo si las funciones nuevas no son accesibles. Marcos: Use el elemento noframes y ttulos con sentido. Tablas: Facilite la lectura lnea a lnea. Resuma.

Revise su trabajo: Verifique. Use las herramientas, puntos de comprobacin y pautas de http://www.w3.org/TR/WCAG.
(http://www.w3c.es/traducciones/es/wai/intro/accessibility, 2011)

Internacionalizacin
La internacionalizacin es el diseo y desarrollo de un producto, una aplicacin o el contenido de un documento de modo tal que permita una fcil localizacin con destino a audiencias de diferentes culturas, regiones o idiomas. La internacionalizacin generalmente implica:

 Un modo de diseo y desarrollo que elimine obstculos a la localizacin o la distribucin internacional. Esto incluye cuestiones tales como (entre otras) usar Unicode o asegurar, all donde corresponda, un correcto tratamiento de las codificaciones de caracteres anticuadas; controlar la concatenacin de cadenas; o evitar que la programacin dependa de valores de cadenas pertenecientes a la interfaz de usuario. Habilitar caractersticas que tal vez no sean usadas hasta el momento de la localizacin. Por ejemplo, aadir en la DTD etiquetas para habilitar el texto bidireccional o la identificacin de idiomas. O hacer la CSS compatible con texto vertical u otras caractersticas tipogrficas ajenas al alfabeto latino.

Poltica de Patentes

Preparar el cdigo para hacer frente a las preferencias locales, regionales, lingsticas o culturales. Por lo general, esto supone incorporar caractersticas y datos de localizacin predefinidos a partir de bibliotecas existentes o de las preferencias del usuario. Algunos ejemplos son: formatos de fecha y hora, calendarios locales, formatos y sistemas de nmeros, ordenamiento y presentacin de listas, uso de nombres personales y formas de tratamiento, etc. Separar del cdigo o contenido fuente los elementos localizables, de modo que puedan cargarse o seleccionarse alternativas localizadas segn determinen las preferencias internacionales del usuario. Obsrvese que esta lista no incluye necesariamente la localizacin del contenido, la aplicacin o el producto hacia otro idioma; se trata ms bien de prcticas de diseo y desarrollo que facilitan esa migracin en el futuro, pero que tambin pueden tener una utilidad considerable aunque la localizacin jams se produzca.
(http://www.w3.org/International/questions/qa-i18n.es.php, 2011)

Poltica de Patentes:
Se trata de una serie de directrices o normas a travs de las cuales el W3C establece la forma de gestionar las patentes en el proceso de creacin y desarrollo de estndares Web con el objetivo de hacer posible la difusin, adopcin y continuo desarrollo de estndares Web sin los problemas que puedan aparecer en relacin a derechos de autor. Es decir, el objetivo principal de esta poltica es asegurar que las recomendaciones del W3C, desarrolladas bajo esta poltica, sean

implementadas libres de derechos de autor. La Poltica de Patentes del W3C promueve la implementacin a gran escala de las Recomendaciones del W3C, estableciendo claramente los requisitos de Licencia libre de Derechos de autor, asegurando la disponibilidad de las licencias de forma universal, y haciendo pblicas las restricciones y limitaciones. La Poltica de Patentes resuelve excepciones a travs de su denominado PAG (Grupo Asesor de Patentes). Se trata de un Grupo de Trabajo constituido con el objetivo de resolver los conflictos que puedan surgir mediante el desarrollo de una recomendacin. Aconseja al W3C sobre los mecanismos para hacer frente a los problemas ocasionados por patentes en la creacin y desarrollo de estndares Web abiertos.
(http://www.w3c.es/divulgacion/guiasbreves/PoliticaPatentes, 2011)

Tecnologa Multimedia

Tecnologa Multimedia:

Las tecnologas multimedia crean una web ms atractiva gracias a la introduccin de imgenes escalables, sonido de alta calidad, vdeo, efectos 3D y animacin, que aportan al usuario una experiencia ms rica en la navegacin por la Web. Entre las tecnologas a destacar estn: La introduccin de todos estos elementos de forma compatible se convierte en una labor complicada para desarrolladores. Por este motivo, las especificaciones desarrolladas por el W3C trabajan en la creacin de lenguajes en los que esta multimedia enriquecida sea compatible con los diversos dispositivos y navegadores existentes en el mercado. Entre las tecnologas a destacar estn:

 SVG (Grficos Vectoriales Escalables), que es un vocabulario XML de descripcin de grficos de dos dimensiones y de aplicaciones grficas. SVG se utiliza en diferentes reas incluyendo grficos Web, animacin, interfaz de usuario, intercambio de grficos, aplicaciones mviles y diseo de alta calidad. SVG est basado en otros estndares de gran uso como JPEG y PNG.

PNG (Grficos de Red Porttiles) para formato de imgenes, DOM para interactividad y scripting, SMIL (Lenguaje de Integracin de Multimedia Sincronizada) para
animacin.

Directorios Virtuales / Errores Personalizados

CSS (Hojas de Estilo en Cascada) para dar estilo.

(http://www.w3c.es/divulgacion/guiasbreves/TecnologiasMultimedia, 2011)

Directorios Virtuales:
Un directorio virtual es un nombre sencillo o alias de un directorio fsico del disco duro del servidor o del directorio principal de otro equipo que no est ubicado en el directorio principal. Puesto que el alias suele ser ms corto que la ruta de acceso del directorio fsico, a los usuarios les resulta ms cmodo escribirlo. El uso de alias es tambin seguro, ya que los usuarios no conocen el lugar del servidor donde estn ubicados fsicamente los archivos y, por tanto, no pueden utilizar esa informacin para modificarla. Adems, con los alias es ms fcil mover directorios en el sitio. En lugar de cambiar la direccin URL del directorio, puede cambiar la asignacin entre el alias y la ubicacin fsica del directorio.
(http://technet.microsoft.com/es-es/library/cc782710%28WS.10%29.aspx, 2011)

Errores Personalizados:
Debido a que algunas veces los errores devueltos por el servidor web dan demasiada informacin acerca de la aplicacin que los produce y que esa informacin puede incluso ser usada para iniciar un ataque contra el servidor, los servidores web ofrecen la posibilidad de que los webmasters puedan configurar las respuestas que muestra el servidor cuando se

producen algunos errores o problemas. As, se puede usar para mostrar errores algo ms amigables o adaptados a un propsito o aplicacin concreta o que puedan orientar al usuario por vas alternativas de solucin. Por ejemplo, si un script termina de forma anormal y se produce una respuesta "500 Server Error", el servidor podr ser configurado para responder usando una de las siguientes alternativas: 1. Desplegar un texto diferente, en lugar de los mensajes de la NCSA. Redireccionar la peticin a una URL local. Redireccionar la peticin a una URL externa.

Errores Personalizados

2. 3.

Redireccionar a otra URL puede resultar de utilidad, pero solo si con ello se puede tambin pasar alguna informacin que pueda explicar el error o problema y/o registrarlo en el log correspondiente ms claramente.
(http://ocw.uniovi.es/mod/resource/view.php?id=838, 2011)

Niveles de pensamiento: CONOCIMIENTO:Identificar COMPRENSIN: Fundamentar

Ejercicio 01 :Manejo de Conceptos y Aplicacin. Duracin: 45 minutos 1.- IDENTIFICA algunos sitios en la red que apliquen algunos de los conceptos mencionados. 2._ FUNDAMENTA la prctica de la usabilidad 3.- DISEA un sitio sencillo a nivel de boceto, en donde apliques alta usabilidad. 4.- COMPARA tu diseo con el de tus compaeros y DETERMINA mejoras en l.

Actividades

Niveles de pensamiento: APLICACIN: Disear, Comparar ANLISIS: Determinar

5._ Haz un RESUMEN por escrito de la semana.

MA TE
Niveles de pensamiento: SINTESIS: Resumir

LD EA No PO olvi YO des tu g : co n u a side pr 1e je ct ra pro rcicio ica gu r, a pue ia sto dicion da y par al a la se m ana II

RIA

Sntesis de la semana: 10 minutos.

Perfecto !...Aprendiste algunos conceptos bsicos respecto al funcionamiento de los servidores en la web y de como la tecnologa web funciona.

Adelanto de la prxima semana: 5 minutos.

La prxima semana conocers trminos asociados a la construccin de

aplicaciones web ocupando XHTML y dars tus pasos iniciales en la

construccin de tus primeras pginas web.

Cierre

Fin Semana II