Ecom ajax by Juan Carlos Olivares Rojas

TecnologĂas Web Ajax M.C. Juan Carlos Olivares Rojas

Proyecto

• Desarrollar un sitio Web de publicidad de un producto cualquiera utilizando los estándares Web que se verán en este documento. • Básicamente se tendrá una página de inicio, una con información de la empresa, página de contacto y la página de descripción del producto. • Se tendrá un buen diseño.

Introducción

• La World Wide Web o simplemente Web es un servicio de hipertexto que se ejecuta sobre Internet. • Actualmente es el servicio de Internet más extendido en la actualidad. • Un servidor Web no es otra cosa que un servidor de archivos aunque en la actualidad a pasado a ser toda una plataforma de servicios de aplicación.

Introducción

• La Web basa su funcionamiento principalmente en el formato HTML. • La Web más que hipertexto recibe el nombre de hipermedia dado que además del texto y los enlaces (característica fundamental del hipertexto) puede representar la información en diferentes formatos: imágenes, sonidos, animaciones, video.

Introducción

• Los primeros sitios Web estaban enfocados en la investigación y la docencia, posteriormente se le vio el éxito comercial. • La Web es el medio para realizar comercio mas no es el fin. • A continuación se muestra la historia que ha tenido la Web.

Historia de la Web

• En marzo de 1989, estando en el CERN , Tim Berrners publica el artículo”Information Management: A Proposal”, el cual muestra la propuesta original de la WWW. • En octubre de 1990, Tim Berners inicia su trabajo sobre un programa que maneja y edita hipertexto usando una computadora NeXTStep y nombrando a este programa "WorldWideWeb”.

Primer Navegador Web

Primer sitio Web

El sitio “Info.cern.ch” fué la dirección del primer sitio web y del primer servidor web, corriendo en una computadora NeXT en el CERN. La primera página web fué: ”http://info.cern.ch/hypertext/WWW/The Project.html“ la cual informaba acerca del proyecto WWW e incluía detalles para que los visitantes pudieran crear su propia página Web.

Primera pรกgina Web

Primer Navegador Web: Mosaic

Netscape

En marzo de 1994, Marc Andreessen y algunos compañeros que trabajaban en el desarrollo de Mosaic en el NCSA, abandonan su trabajo para en abril de 1994 fundar Netscape junto con Jim Clark. El 13 de octubre de 1994 sale al mercado el navegador de Netscape, denominado inicialmente “Mosaic Netscape 0.9” y posteriormente renombrado “Netscape Navigator”.

Netscape

• En 3 años la compañía Netscape creció de 3 empleados a 2600 y tener un valor de 765 millones de dólares. • El navegador Navigator llegó a ser utilizado por el 80% de los usuarios de internet hasta que surgió el “Explorer” de Microsoft. • Posteriormente la compañía fué comprada por AOL y el 1º de marzo del 2008 se terminó el soporte oficial del navegador.

Web 2.0

• El término Web 2.0 fue acuñado por Tim O'Reilly en 2004 para referirse a una segunda generación de Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, y los wikis que fomentan la colaboración y el intercambio ágil de información entre los usuarios

Web 2.0

• La Web 2.0 no es Internet 2. La Web 2.0 funciona sobre la misma red de Internet que todos conocemos. • La Web 2.0 no es un nuevo lenguaje de programación. • La Web 2.0 no es un cambio radical de tecnología, se sigue utilizando HTTP, HTML, JavaScript y muchas de las tecnologías que han surgido, aunque se usan de otro modo

Web 1.0 vs Web 2.0 Concepto

Web 1.0

Web 2.0

Quiénes publican

Los productores de los sitios

productores y usuarios

Información

Centralizada

Dispersa en miles de sitios

Sólo grandes presupuestos

Cualquier persona

Dueño de la inform.

El sitio web

Los usuarios

Tecnología

HTML 4.0

XHTML y CSS

Disponibilidad

Al final de cada proyecto

Beta perpetuo

Posibilidad de usar servicios de otros

Ninguna

Sitios con APIs

Web 1.0 vs Web 2.0 Concepto

Web 1.0

Web 2.0

E-mail Publicidad Mapas Fotograf铆as Sitios de usuarios Buscador Enciclopedia Informaci贸n Oficina Compras

Hotmail DoubleClick MapQuest Ofoto Geocities Altavista Encarta Slashdot --Amazon

Gmail Google AdWords Google Maps Yahoo! Flick Blogger Google Wikipedia Digg Google Docs GAP

RIA

โ ข Las RIA (Rich Internet Applications Aplicaciones Ricas de Internet) son un nuevo tipo de aplicaciones con mรกs ventajas que las tradicionales aplicaciones Web. Esta surge como una combinaciรณn de las ventajas que ofrecen las aplicaciones Web y las aplicaciones tradicionales.

RIA

• Las aplicaciones web tradicionales tienen poca capacidad multimedia (para ver un vídeo es necesario usar un programa externo para su reproducción.)

RIA

• Las principales características de este tipo de aplicaciones son: • • • • •

Experiencia rica del usuario Capacidad Offline Productvidad alta del desarrollador Flexibilidad Fáciles de administrar, distribuir actualizar

RIA

• Las principales desventajas que representa esta tecnología son dos: • Forma de navegar (navegación por hipervínculos con retardo entre páginas) • Botón atrás: las aplicaciones RIA tienen sólo una forma de interacción por lo que al aplicar dicho botón se sale de la aplicación.

Navegaci贸n en RIA

Segunda guerra de navegadores

• Con la aparición de la Web los navegadores Netscape e Internet Explorer se enfrascaron en una guerra resultado vencedor este último a principios de la década del 2000. • En estos momentos se está librando otra batalla donde los competidores son:

Adoble Flex

• Flex es ahora un producto de Adobe y es una plataforma que permite generar aplicaciones RIA basadas en la plataforma Flash, pero con un entorno de trabajo y un modelo pensados de manera específica para este tema y no para el mundo de la animación. • Flex es el nombre de la plataforma que incluye:

Adobe Flex

• Flex Builder: Entorno de desarrollo comercial basado en Eclipse. • Flex SDK: Compilador gratuito que toma el código fuente y loconvierte a SWF. • Flex Data Services: Servidor de aplicaciones basado en Java que provee servicios a las aplicaciones RIA desarrolladas en Flex. • Flex Chart Components: Componentes adicionales que generan gráficos estadísticos.

Otras Tecnologías RIAs

• OpenLaszlo: es una plataforma Open Source mantenida por la empresa Laszlo Systems, que genera aplicaciones RIA a partir de un lenguaje de marcado XML conocido como LZX y código ECMAScript. Microsoft Silverligth: Cuando Microsoft lanza Windows Vista, también lanzó un subsistema (compatible con XP y 2003) llamado Windows Presentation Foundation (WPF) que posteriormente se relanzaría para la web como Silverlight.

Otras Tecnologías RIAs

• Para su funcionamiento, los navegadores requieren un plugin. • Java WebStart: Esta tecnología permite generar aplicaciones de internet del mismo modo que si fueran de escritorio, para ello se requiere tener instalada la Java Virtual Machine en el equipo del cliente y pueden ser invocadas desde un vínculo en una página Web.

Estándares Web • • • •

XHTML 1.0 or superior CSS Level 2 DOM Level 2 ECMAScript 262 (current JavaScript) http://www.webstandards.org/about/

Estándares Web

• XHTML (estructura contenidos)

semántica

del

• Cascading Style Sheets (presentación del contenido) • Javascript (comportamiento e interacción del sitio Web)

AJAX

• Acrónimo de Asynchronous Javascript And XML. Viene a sustituir el término DHTML • Estas tecnologías junto con XHTML+CSS forman el fundamento en que se basa la Web 2.0 • El asincronismo viene a cambiar el viejo paradigma de click-and-wait de las aplicaciones Web tradicionales haciéndolas más dinámicas.

Introducción

• AJAX no es nada nuevo bajo el sol, simplemente es una idea nueva y brillante de utilizar tecnologías existentes. • AJAX no es un estándar por lo que se llega a implementar de diversas formas. • Existen varios frameworks como atlas (.NET) Script.aculo.us, Prototype, Dojo, etc que ayudan a simplificar la programación.

Introducción

• AJAX no es un estándar y esto ha sido una de sus principales problemáticas. • AJAX trae de vuelta el énfasis en el procesamiento del lado cliente, después de haberse centrado muchos años en las tecnologías del lado del servidor. • Una de las problemáticas que presenta es que existen diversos caminos de interacción.

Introducción

• Generalmente la asincronía se ve reflejado en el refresco de las páginas pero no es la única forma. • El asincronismo se logra a través del objeto XMLHTTPREQUEST. • Antes de entrar a detalle se verán las distintas tecnologías Web que conforman AJAX.

Aplicacion Web Tradicional 1- La aplicacion muestra una lista de empleados a seleccionar.

2- Cuando el usuario selecciona un empleado se muestra los datos (primer refresco) 3- El usuario modifica los datos y los guarda (segundo refresco)

4- Se vuelve al inicio de la aplicaci贸n (tercer refresco)

Aplicaci贸n Web con AJAX

No existe el refresco de la aplicaci贸n.

Ejemplos de utilización de AJAX • Google Suggest • Google Earth • Facebook

Aplicaciones SĂncronas

Aplicaciones AsĂncronas

Programación Web del lado del Cliente

• La programación de Aplicaciones Web (Webapps) tiene dos vertientes de acuerdo a donde se desarrolle: en el lado del cliente y en el lado del servidor. • Antes de ver los estándares para la programación de aplicaciones Web en el lado cliente (XHTML/CSS/DOM/Javascript) se describirá básicamente lo que son las tecnologías XML.

TecnologĂas XML M.C. Juan Carlos Olivares Rojas

XML

• eXtensible Markup Language (Lenguaje de Marcado eXtensible) • Es un metalenguaje

– Lenguaje que describe a otros lenguajes

• XML sólo define el lenguaje, lo que se realice con él depende de la aplicación.

XML

• Es de un lenguaje de marcado por que utiliza etiquetas. • Las etiquetas se representan con paréntesis angulares <> y dentro un identificador. • El lenguaje de marcado mejor conocido es el HTML (HyperText Markup Language), el cual es la base de los documentos Web

XML

• El problema con HTML es que es un lenguaje que presenta muchas irregularidades en su construcción, como etiquetas agregadas al lenguaje, etiquetas que no cierran • Los documentos de XML características principales: estructurados y son válidos

tienen dos están bien

XML

• Se dice que un documento está bien formado si para cada etiqueta del lenguaje no tiene errores léxicos. • Se dice que un documento es válido cuando se representan los elementos del lenguaje con un orden y significado adecuados, a esto se le denomina no tener errores sintácticos y semánticos

XML

• Determinar si un documento está bien formado consiste en verificar que cumpla la sintaxis correcta de html • <img src=imagen.jpg> Válido en HTML Pero no válido en HTML • XHTML es la versión de HTML con la sintaxis estricta de XML

XML

• <img src=“imagen.jpg”> • </img>

• <img src=“imagen.jpg”/> • <IMG src=“imagen1.jpg”/> no es válido • <imagen/> Es correcta (podría ser valida)

Estructura de un documento en XML

<? xml >? <raíz>

<otra>Valor</otra>

</etiqueta1> <etiqueta 2 atributo1=“valor”/> <etiqueta3>valor</etiqueta2>

</raíz>

Algunas herramientas para utilizar XML • XRAY • XMETAL

• XML Spy • XML Notepad • Visual .NET • Otros entornos de programación

XML

• Otros lenguajes que utilizan XML son: • WML Lenguaje para dispositivos móviles

páginas

Web

• XHTML-MP La nueva versión para páginas Web en dispositivos móviles siguiendo la sintaxis de XHTML.

Lenguajes basados en XML

• MathML Lenguaje para crear ecuaciones

• XML es un lenguaje en texto plano por lo que la seguridad es mínima. • VoiceXML es un lenguaje para representar voz. • La versión más actual de XML es la uno. Está por aparecer la segunda versión

Otros lenguajes basados en XML • • • • • • • •

VRML Realidad Virtual RDF Descripción de Recursos OWL Ontologías SOAP Transporte de servicios Web WSDL Descripción de servicios Web UDDI Encontrar servicios Web XUL/XAML Interfaces de usuario SVG Imágenes virtuales

Arquitectura de XML SMIL XHTML HTML

TEI

... ...

XML SGML

SpeechML XUL MathML RDF

Islas XML.

• XML dentro de una página HTML. • Invoca una instancia del procesador XML del cliente. • Puede ser identificada por un ID. • Puede controlarse y modificarse con scripts en el cliente.

Ejemplos de islas XML.

<html> <head> <title>Islas XML</title> <XML id=“info-clima”> <clima><ciudad> <nombre>Mexico DF</nombre> <reporte> <alta>27</alta><baja>18</baja> <precip total_dia=“0” tipo=“lluvia” fuerza="ligera"/> </reporte> </ciudad></clima> </XML> </head> <body> ...

Isla XML

驴D贸nde coinciden el XML y las BD? Capturar

XML Base de datos

XML

XML Mantener

XML

Consultar

XML y las BDs.

• Capturar en XML.

– Publicar de una fuente XML hacia la BD.

• Consultar en XML.

– Crear salidas desde la BD a un formato de presentación (como el HTML).

• Exportar en XML.

– Crear vistas lógicas de la base de datos.

• XML como protocolo entre BDs.

– Operaciones entre bases de datos usando XML.

XML y el modelo de 3 niveles. Nivel de datos

Nivel de l贸gica de negocios

XML

BDs

Nivel de presentaci贸n

XML

Aplicaciones

Navegador

Ejemplos de XML

โ ข A continuaciรณn se muestran algunos ejemplos de lo que se puede hacer con XML.

SVG

•

Scalable Vector Graphic

•

Es un formato basado en XML cuya finalidad es mostrar gráficos en formato vectorial utilizando la sintaxis de XML.

•

SVG está tomando mucho auge debido a que puede ahorrar espacio en imágenes que son del tipo vectorial

SVG

• El documento en SVG es interpretado por un parser o visor. Los más famosos son batik y el visor de ADOBE. • SVG es un lenguaje de propósito específico ya que sólo sirve para una opción en particular.

Ejemplo SVG

• <?xml version="1.0" standalone="no"?> <! DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/s vg11.dtd"> • <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"> • <circle cx="100" cy="100" r="50" style="fill:red;"/> • </svg>

MathML â&#x20AC;˘ x 2 + 4x + 4 =0 <mrow> <mrow>

<msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>&invisibletimes;</mo> <mi>x</mi> </mrow> <mo>+</mo> <mn>4</mn> </mrow> <mo>=</mo> <mn>0</mn> </mrow>

• Synchronised Language

SMIL

Multimedia

Integration

• Integración de contenidos multimedia con texto, audio y video. • Soporte en la mayoría del sotware de reproducción de medios y en navegadores Web con Plug-in

Ejemplo SMIL <smil> <head> <meta name="title" content="Online Teaching Services promo" /> <meta name="author" content="Jay Moonah, CAT" /> <layout type="text/smil-basic-layout"> <root-layout width="280" height="316" background-color="white"/> <region id="AnimChannel1" title="AnimChannel1" left="0" top="0" height="265" width="280" fit="hidden"/> </layout> </head> <body> <par title="Online Teaching Services promo" author="Jay Moonah, CAT" > <audio src="final.rm" id="Soundtrack" title="Soundtrack"/> <animation src="otscompfin.swf" id="Animation" region="AnimChannel1" title="Animation" fill="freeze"/> <text src="cc.rt" id="caption" region="cc" title="cc" fill="freeze"/> </par> </body></smil>

Validación de documentos en XML

• Para validar documentos XML existen dos variantes: • DTD (Document Type Definition) basado en gramáticas BNF • XMLSchema basado en XML

Reglas: La DTD del XML.

• Una Definición de Tipo de Documento (Document Type Definition, DTD) permite:

– Definir un conjunto específico de etiquetas con relaciones específicas. – Definir valores predeterminados para los atributos. – Definir entidades de texto y binarias adicionales junto con sus notaciones. – Indicar el elemento raíz.

El control de la DTD.

• La DTD proporciona:

– Una sintaxis formal que sirva de guía a un intérprete/analizador (parser). – La habilidad de definir valores predeterminados para los atributos. – Especificaciones para la estructura.

• Una DTD es una buena manera (pero no la única) de controlar la creación de datos.

Declaraci贸n de elementos

Apertura y palabra clave. Nombre_elemento Nombre del elemento. ( . . . ) Modelo de contenido o PALABRACLAVE contenido declarado. > Cierre. <!ELEMENT

Palabras clave para el contenido declarado: EMPTY Sin elemento o contenido. ANY Cualquier combinaci贸n de elementos descendientes y datos caracter.

Modelo de contenido.

• Elementos o #PCDATA. • Conectores. , |

seguido de uno u otro

? + *

Uno y solo uno configuracion Cero o uno Nombre? Uno o más Controlador+ Cero o más Opciones*

(a,b) (a|b)

• Indicadores de ocurrencia.

Comentarios XML

• Los comentarios pueden aparecer en cualquier parte del documento fuera de otros marcajes. • Pueden aparecer dentro de la declaración de tipo de documento. • Un procesador XML puede, pero no requiere, ser capaz de leer y recuperar los comentarios.

Declaración de atributos Apertura y palabra clave. Nombre_elemento Nombre del elemento. Nombre_atributo Nombre del atributo. ( . . . ) Lista de valores o PALABRACLAVE valor declarado. “ . . . ” Valor predeterminado o #PALABRACLAVE palabra clave de valor predeterminado. > Cierre. <!ATTLIST

Declaracion de documento <!DOCTYPE Apertura y palabra clave. Elemento_raiz Nombre del elemento raíz. PALABRACLAVE SYSTEM o PUBLIC y “dtd.dtd” una DTD XML externa o [...] declaraciones internas. > Cierre.

Ejemplo completo (XML+DTD).

... <!DOCTYPE clima [ <!-Nombre Modelo contenido --> <!ELEMENT clima (ciudad+) <!ELEMENT ciudad (nombre, reporte) <!ELEMENT nombre (#PCDATA) <!ELEMENT reporte (alta, baja, precip?) <!ELEMENT alta (#PCDATA) <!ELEMENT baja (#PCDATA) <!ELEMENT precip EMPTY <!ATTLIST precip total_dia CDATA tipo (lluvia | nieve) "lluvia" fuerza (ligera | fuerte) #IMPLIED ]> ...

> > > > > > > #REQUIRED >

Ejemplo

<?xml version=“1.0”?>

<!DOCTYPE audiocollection “AudioCollection.dtd”>

SYSTEM

Ejemplo

<title>La carretera </title> <artist>Julio Iglesias</artist> <track>La carretera</track> <comments>Gran ĂĄlbum </comments> </audio> â&#x20AC;Ś </audiocollection>

DTD

<!ELEMENT audiocollection (audio)+> <!ELEMENT audio (title, artist+, track+, comments?)> <!ATTLIST audio

DTD

<!ELEMENT title (#PCDATA)> <!ELEMENT artist (#PCDATA)> <!ELEMENT track (#PCDATA)> <!ELEMENT comments (#PCDATA)>

XMLSchema

<?xml version=“1.0”?>

name=“title”

name=“artist” name=“track”

XMLSchema

XMLSchema

name=“audio”

</ElementType>

XMLSchema

name=“audiocollection”

</ElementType>

</Schema>

minOccurs=“1”

XPath

• Es una tecnología XML que sirve para recorrer un documento XML (es una estructura tipo árbol) • Sirve de base para otras tecnologías como XSL y Xpointer • / indica la raíz • /pantalla hace referencia a <pantalla> de nivel principal

una

etiqueta

XPath

• /compra/cesta[2] Segundo elemento cesta • //cesta todos los elementos sin importar donde se encuentren • /compra/cesta[3]/* • /compra/cesta[@usuario=“Pedro”] • /compra/cesta[@precio &lt; 15000] • //*[count(cesta)=3]

XSL

• eXtensible Stylesheet Language. • Permite transformar documentos XML en otros documentos dándole otros formatos. • Agrega estilos a documentos XML mediante reglas especiales de formatos. • Esto se realiza por medio de dos tecnlogías XSLT y XSL-FO

Cómo funciona el XSL Arbol fuente (XML)

XSL Arbol resultado (xmlsn:fo)

Transform. XSL

Intérprete

¿?

Ejemplo de plantillas XSL

<xsl:template match="/"> <HTML> <HEAD> <TITLE>El clima.</TITLE> </HEAD> <BODY BGCOLOR="White"> <h1>El clima.</h1> <TABLE width="60%" border="1" cellspacing="0" cellpadding="5"> <xsl:apply-templates select="clima/ciudad" order-by="+nombre"/> </TABLE> </BODY> </HTML> </xsl:template>

Ejemplo de plantillas XSL

<xsl:template match="clima/ciudad"> <TR> <TD style="font-weight: bold; color: Black; fontfamily: sans-serif;"> <xsl:apply-templates select="nombre"/> </TD> <TD style="font-weight: bold; color: Red; font-family: sans-serif;"> <xsl:apply-templates select="reporte"/> </TD> <TD style="font-weight: bold; color: Blue; fontfamily: sans-serif;"> <xsl:apply-templates select="reporte/precip"/> </TD> </TR> </xsl:template>

Plantillas XSL

<xsl:template match=“etiqueta”>

– Define el código HTML asociado con una etiqueta XML dada.

<xsl:value-of select=“nombre_nodo”> <xsl:value-of select=“@nombre_atributo”>

– Regresa el texto asociado con el atributo o nodo.

<xsl:for-each select=“nombre_nodo”> . . . </xsl:for-each>

– Repite un proceso para cada elemento con la etiqueta especificada.

<xsl:if test=“condicion”> . . . </xsl:eval>

XSL if

– Evalua una condición, si el nodo actual retorna un valor, entonces se considera verdadera la condición.

• Ejemplo:

<xsl:template match="precip"> <xsl:if test=".[@total_dia > 0]"> <xsl:value-of select="@total_dia"/> mm </xsl:if> </xsl:template>

• XSL Transformation

XSLT

• Lenguaje fuente (XML) + (plantilla de transformación + procesador XSL)  Lenguaje destino (XML) • <xsl:template match=“/”> • <xsl:template match=“audiocollection/audio/artist”> • </xsl:template>

XSLT

<xsl:template match=“audiocollection/audio/artist”> <b>Artista: </b><xsl:value-of/>

</xsl:template>

<xsl:if match=“@type=jazz”>

<xsl:apply-templates select=“audio”>

</xsl:if>

XSLT

review”

</tr> </table>

XSLT

<xsl:template match=“comments”>

<b>Comentarios:</b><br/><xsl:valueof/><br/>

</xsl:template>

<?xml-stylesheet href=“AudioCollection.xsl” type=“text/xsl”?>

XSLT

<?xml version=“1.0”?> <xsl:stylesheet xmlns:xsl=http://www.w3.org/TR/WD-xsl> <xsl:template march=“/”> <html><head><title>Ejemplo XML</title></head> <body bgcolor=“#FFFFFF”> <h2>Colección de discos</h2> <xsl:for-each select=“audiocollection/audio”> <xsl:apply-templates select=“title”/>

XSLT

<xsl:apply-templates select=“@year”/> <xsl:apply-templates select=“artist”/> <xsl:apply-templates select=“track”/> <xsl:apply-templates select=“comments”/> </xsl:for-each> </body></html>

</xsl:template>

<xsl:template match=“title”>

<b>Título: </b><i><xsl:value-of/></i> </xsl:template>

• • • • • • •

XSLT

<xsl:template match=“@year”> (<xsl:value-of/>)</br> </xsl:template> <xsl:template match=“artist”> <b>Artista: </b><xsl:value-of><br/> </xsl:template> </xsl:stylesheet>

XML 2.0

• ¿Qué hay de nuevo en XML 2.0? • Nuevas tecnologias – XFORMS – XSLT 2.0 – XPath – XPointer – XQuery – XLink

XLink/XPointer

• Hacen que los enlaces y la navegación de los documentos sean más interactivos • XLink hace referencias a documentos XML mientras que XPointer hace referencia a otros tipos de recursos • http://patito.com/doc.xml#id(c) • http://patito.com/pagina.html#observacione s

Entidades

<?xml version=“1.0”?> <!DOCTYPE estrenos “estrenos.dtd” <!ENTITY titulo “Programacion XML”> <!ENTITY pie “-2007-”> ]> … <titulo>&titulo;</titulo> <pie_de_pagina>&pie;</pie_de_pagina>

Ubicación DTD

• <!DOCTYPE nombre SYSTEM “URL”> • Forma FPI (Formal Public Identifier) • //reconocido//dueño//descripción//idioma • <!DOCTYPE “-//MPE//DTD “URL”> • Reconocido: + o -

nombre PUBLIC Ejemplo version 1.0//es”

Espacios de nombres

• Varios lenguajes pueden utilizar las mismas etiquetas y si se llegan a combinar podrían resultar problemas. • <película>: <título>, <director>, <año> • <postulante>: <título>, <experiencia>, <idioma>, <residencia> • <película:título><postulante:título>

• • • • • • • •

Espacios de nombres

<?xml version=“1.0”?> <pos:postulante xmlns:pos=“URL”> <pos:título>tec morelia</pos:titulo> … <pf:película xmlns:pf=“URL2”> <pf:título>Casa embrujada</pf:título> </pf:película> </pos:postulante>

XHTML

• XHTML

Introducción

– Reformulación de HTML 4.0 en XML

• HTML

– El HyperText Markup Language es el lenguaje de publicación usado por la World Wide Web. – Es una aplicación SGML (Standard Generalized Markup Language), un sistema para definir lenguajes para dar formatos a documentos.

Estructura XHTML

• Organización de elementos – Elementos de nivel superior • html, head, body

– Elementos de cabecera

• link, meta, script, style, title

– Elementos en bloque

• div, h1 a h6, hr, noscript, p, pre

– Elementos en línea

• br, a, img, map, area, script, span

Estructura XHTML (5)

– Listas

• dl, dt, dd, ul, ol, li

– Tablas

• table, caption, tr, th, td

– Elementos de frase

• abbr, acronym, code, em, strong, var

– Formularios

• form, button, fieldset, legend, input, label, select, optgroup, option, textarea

Atributos en XHTML

• Atributos principales

– Se pueden aplicar a la mayoría de los elementos.

• id: permite asignar un identificador a un único elemento • class: permite asignar una clase o un conjunto de clases a un elemento. • title: permite aplicar un título a un elemento específico. • style: permite aplicar un estilo a un elemento específico.

Página 108

Atributos en XHTML

• Atributos de internacionalización

– Se pueden aplicar a la mayoría de los elementos.

• lang: especifica un lenguaje que se aplicará a un elemento y a su contenido. El valor del atributo debe especificarse conforme a la RFC 1766 (p.e, es-ES para español). • dir: especifica el sentido del texto de izquierda a derecha (dir="ltr", el valor por defecto) o de derecha a izquierda (dir="rtl").

Atributos en XHTML

• Atributos de teclado

– Se pueden aplicar a los elementos a, area y formularios. • acceskey: permite asignar una tecla de acceso rápido a un elemento. • tabindex: permite asignar un orden de tabulación a un elemento.

Página 110

• Eventos

Atributos en XHTML

– Eventos de formulario • onchange: se ejecuta el script cuando el elemento cambia. • onsubmit: se ejecuta el script cuando se envía el formulario. • onreset: se ejecuta el script cuando se limpia el formulario. • onselect: se ejecuta el script cuando se selecciona el elemento. • onblur: se ejecuta el script cuando el elemento pierde el foco. • onfocus: se ejecuta el script cuando el elemento gana el foco.

Atributos en XHTML

– Eventos de ventana

• onload: el script se ejecuta cuando se carga un documento. • onunload: el script se ejecuta cuando se descarga un documento.

– Eventos de teclado

• onkeydown: el script se ejecuta cuando se presiona una tecla. • onkeypress: el script se ejecuta cuando se presiona y libera una tecla. • onkeyup: el script se ejecuta cuando se libera una tecla.

Atributos en XHTML

– Eventos de ratón

onclick: al hacer clic con el ratón. ondblclick: al hacer doble clic con el ratón. onmousedown: al presionar el botón del ratón. onmousemove: cuando se mueve el puntero del ratón. onmouseout: cuando el puntero del ratón se mueve fuera de un elemento. • onmouseover: cuando el puntero del ratón se mueve sobre un elemento • onmouseup: al liberar el botón del ratón. • • • • •

Ejemplo de XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> My Home Page </title> </head> <body> <h1>My Home Page </h1> <p> Welcome to my home page </p> </body> </html>

Transitional//EN"

Estructura Jerรกrquica

Estructura de Documentos

Los documentos tienen una estructura bien definida

Estructura de Documentos

A nivel de programaci贸n se cuenta con un dise帽o l贸gico

Elementos de HTML depreciados en XHTML

Estructura de XHTML

• Existen dos tipos de etiquetas: contenedores y elementos “Inline”.

bloques

• Los contenedores de bloques definen la estructura de un documento, mientras que los elementos Inline contienen el contenido del documento.

Estructura de XHTML

Hijos de la Etiqueta HEAD

Div

• DIV encierra un conjunto de elementos <div

style=“text-align: center;”> <h2> News</h2> <p><a href=“budget.html”>Budget</a></p> <p><a href=“invest.html”>Investment</a></p> </div>

DIVs

â&#x20AC;˘ No se recomienda el uso de etiquetas table para el diseĂąo <div id="article">xxx</div> #article{ width:250px; padding:5px; float:right;}

Span

• Spans encierra objetos (texto, gráficos) dentro de un elemento. <p>Call me Ishmael. Some years ago — <span style=“fontstyle: italic;”>never mind how long precisely</span> — having little or no money in my purse, and nothing particular to interest me on shore,

XHTML

• Algunas de las ventajas de usar XHTML son: • Se reduce ancho de banda • El contenido se hace accesible a diversos dispositivos. • Se tiene un código más limpio y fácil de mantener.

XHTML

• XHTML está enfocado en el fondo del documento (contenido) no en la forma (diseño). • En 1995 Al Gore definió el término superautopista de la información, no superautopista del diseño. • Existen tres tipos de documentos: Transitional, Frameset, and Strict.

XHTML

• Están sustituyendo a HTML, pueden tener la extensión .htm o .html. • Todas las etiquetas que abren deben de cerrar. Se deben cerrar las comillas simples o dobles. • Las etiquetas van en minúscula

XHTML

• El tamaño del texto puede variar entre los distintos navegadores. • Es recomendable incluir los atributos width y height en la etiqueta img para que el navegador asigne espacio desde el principio. • El reducir estos atributos no afecta el tamaño de la imagen.

XHTML

• Se debe tener cuidado con los caracteres especiales. Se deben utilizar entidades como &lt para >. • Utilizar la etiqueta label en los formularios. • Se deben guardar el uso exacto de las etiquetas; por ejemplo, h1, table, etc.

XHTML

• Utilice comentarios descriptivos al igual que sangrías para mejorar la legibilidad del código fuente. • Las etiquetas deben cerrar jerárquicamente, no se permiten anidamientos inválidos. • Poga siempre títulos a las páginas.

XHTML

• Coloque los elementos principio del formulario.

input

ocultos

• Entre más metadatos se tenga, será más fácil posicionar los recursos Web en los primeros lugares. • El método GET de HTTP no debe utilizarse para enviar datos, en su lugar debe de utilizarse a través de POST.

Validación de Páginas

• Se pueden validar la estructura de las páginas XHTML a través de la URL: http://validator.w3.org • Para validar hojas de estilo CSS se utiliza: http://jigsaw.w3.org/css-validator/ • Existen otros tipos de validaciones de accesibilidad y certificados de algunas organizaciones.

Sopa de Etiquetas

โ ข Se recomienda ampliamente sangrar el cรณdigo.

Codificación

• Se debe tener mucho cuidado con el esquema de codificación del documento Web para no tener problemas con símbolos de puntuación como acentos. • Se recomienda utilizar UTF-8 con el juego de caracteres ISO-LATIN

CSS

CSS en XML

• CSS Cascade StyleSheet

• Definen tipos de datos sin realizar ninguna transformación. • No es muy utilizada en lenguajes XML (se recomienda mejor XSL) pero es muy utilizada en HTML y lenguajes de presentación.

Selectors

â&#x20AC;˘ Selector es p { color: h1, h2, h3, h4 { font-style: italic; }

blue

simples }

â&#x20AC;˘ Selectores contextuales ul li { font-weight: bold; } #main img { border: solid black 5px; } p.intro { font-family: verdana, sans-serif;}

El modelo de caja

Todos los elementos de XHTML contienen padding, border, and margin

Dise単o Visual con CSS

Esquema visual en capas #logoBranding

#branding

#content #mainNav

#subNav

#secondaryContent

Declaraciones Comunes

â&#x20AC;˘ Background, background-attachment background-color, background-repeat border, bottom, color, cursor, display, float, font, fontfamily, font-size, font-style, font-weight, height, left letter-spacing, lineheight, list-style-image, list-style-position, list-style-type, margin, overflow, padding, position, right, text-align, text-decoration, text-indent, text-transform, top, verticalalign, visibility, white-space, width, wordspacing, word-wrap, z-index

Inclusión de CSS

• El ligado entre CSS y un documento XHTML se puede hacer de tres formas distintas: • <STYLE TYPE="text/css"> /* Styles go here... */ </STYLE> • <LINK REL="stylesheet" HREF="default.css" TYPE="text/css"> • <P STYLE="color: #FF0000; font-weight: bold;"> some text </P>

Ejemplo de CSS <html> <head> <style type="text/css"> h2 {text-align: center; color: blue} pre.java { border: solid; left-margin: 20px; background-color: #FFFFEE; color: blue; font-weight: bold } pre.cpp { font-size: 200%; border: dashed; left-margin: 40px; color: red } </style> </head>

Ejemplo de CSS <body> <h2>Java Code</h2> <pre class="java"> public static void main(String[] args) { System.out.println("Hello world"); } </pre> <h2>C++ Code</h2> <pre class="cpp"> int main() { cout << "Hello"; } </pre> </body> </html>

Representaci贸n Visual

Otro Ejemplo CSS

<?xml version=“1.0” ?> <?xml-stylesheet href=“ejemplo.css” ?> <computador>

type=“text/css”

<cpu>Información</cpu> <teclado class=“clase1”>Info Teclado</teclado> <raton class=“clase2”>Info ratón</raton>

</computador>

Otro Ejemplo CSS

.clase1 { font-familiy: sans-serif; font-weight: bold; background: red; font-size: 30pt }

.clase2 { font-family: fantasy; background: red; font-size: 30pt }

DOM

• Document Object Model, Modelo de Objeto Documento es una interfaz de programación que permite operar con cualquier recurso XML como si fuese una estructura jerárquica tipo árbol. • Para utilizar DOM el documento XML debe de estar bien formado y ser válido. • Se recomienda ampliamente el uso del atributo id en las etiquetas del documento

DOM

DOM document node Document_type node <!DOCTYPE>

element node <HTML> element node <HEAD>

element node <BODY>

element node <TITLE>

element node <P>

text node "Sample"

text node "This is a..."

DOM

• Existen tres tipos de nodos: elementos, texto y atributos. • DOM cuenta con mecanismos para acceder a los elementos: – getElementById('elementID') regresa un objeto – getElementsByTagName('tag') regresa un arreglo

• Las relaciones que se dan entre los nodos son las siguientes:

• parentNode

DOM

• previousSibling • nextSibling • childNodes • firstChild - childNodes[0] • lastChild childNodes[this.childNodes.length-1]

DOM

• Tiene tres elementos funcionales: • Propiedades: • className, href, target, value

innerHTML,

src,

style,

• Métodos: • appendChild, createTextNode, getElementById, setAttribute

DOM

• Manejadores de Eventos: • onclick, onkeypress, onmouseover, onresize • Ejemplo: el objeto ancla <a> • Propiedades: accessKey, href, id, tabIndex, target • Métodos: blur(), focus() • Eventos: onblur, onfocus

DOM • <script type="text/javascript"><!-• function swapURL() { document.getElementById('searchLink'). href = "http://www.google.com" • } • //--></script> • <a id="searchLink" href="http://www.yahoo.com">My Search Engine</a>

DOM

• <form> • <input onclick="swapURL()" URL!"> • </form>

type="button" value="Change

DOM

โ ข Los objetos disponibles con DOM para una pรกgina XHTML son: Window frame link

document

anchor

form text

location applet

radio

checkbox

etc image etc

Javascript M.C. Juan Carlos Olivares Rojas

Javascript

• Es un lenguaje interpretado con una orientación a objetos no estricta. Permite definir el comportamiento de un sitio Web desde el navegador de los clientes. • No existe el concepto de tipo de datos. • Objetos como Date y Math son similares tanto en Java como Javascript

Javascript

• Las formas existentes de agregar Javascript en XHTML son: • <SCRIPT TYPE="text/javascript"> • // Code goes here... • </SCRIPT> • <SCRIPT TYPE="text/javascript" SRC="code.js"></SCRIPT>

Javascript

• <INPUT onClick="alert('Hi VALUE="Hi">

TYPE="Button" there!');"

• <IMG SRC="blue.gif" • onMouseOver="this.src='red.gif';" onMouseOut="this.src='blue.gif';" >

Ejemplo 1 •

•

<html> <head><title>JavaScript HelloWorld!</title></head> <body> <script language="JavaScript”> document.write('Javascript says "Hello World!"’); </script> </body> </html>

Ejemplo 2

• function killBorder() { • if (document.getElementById("footer”){ • myFooter = document.getElementById("footer"); • footerUL = myFooter.getElementsByTagName("ul"); • for( var i = 0; i < footerUL.length; i++ ) { • footerList = footerUL.item(i);

• • • • • • •

Ejemplo 2

listElements footerList.getElementsByTagName("li"); footerLI = listElements.item(0); footerLI.style.borderLeft = 'none'; } } } window.onload=killBorder;

Ahora si… AJAX

• Para lograr el asincronismo, se logra a través del objeto XMLHttpRequest que a continuación se describe.

Métodos de XMLHttpRequest Método abort() getResponseHeaders()

Descripción Aborta la sesión actual Regresa el conjunto de encabezados de respuestas en forma de cadena getResponseHeader("label") Regresa el valor del encabezado de respuesta indicado como una cadena open("method", Inicializa varios atributos de la solicitud "URL"[,asyncFlag[,"username"[, incluyendo URL, método (get o post), y "password"]]]) bandera de manipulación de asincronismo send(content) Envía la petición con contenido opcional a través de POST setRequestHeader("label", "value") Inicializa un encabezado a ser enviado con la respuesta

Propiedades de XMLHttpRequest Método onreadystatechange readyState

responseText responseXML status statusText

Descripción El manejador de eventos que es lanzado cuando ocurre un cambio de estado Entero que indica el estado actual del objeto: 0 = no inicializado 1 = cargando 2 = cargado 3 = interactivo 4 = completado Respuesta del servidor en formato de cadena Objeto de respuesta de datos compatible con DOM Código numérico de estado HTTP devuelto por la petición Mensaje de estado HTTP devuelto por el servidor

Secuencia de Pasos en Ajax

• 1. Crear el objeto XMLHttpRequest

• Otra forma de hacerlo es verificar si existe el objeto window.XMLHttpRequest

Secuencia de Pasos en AJAX

• 2. Hacer la petición del recurso de forma asíncrona • 3. Esperar la respuesta

Secuencia de Pasos en AJAX

• 4 Agregado del script

• 5. Ejecución del script y obtención de resultados de manera asíncrona

Secuencia de pasos en AJAX

• Nótese que la función sndReq construye una petición pidiendo un parámetro, obteniendo una página, asociando el manejador de eventos y no enviando argumentos especiales en la petición • El manejador de eventos verifica que se haya completado la respuesta, generalmente se valida que haya ocurrido con éxito (estado 200) y se procesa la respuesta.

API AJAX

• DOJO Toolkit (http://dojotoolkit.org/) • Biblioteca JavaScript de código abierto

• Proporciona un API para el control y manipulación de historial • Proporciona en el lado del cliente para la manipulación de URL y marcadores/favoritos • Widgets: • Ordenar tablas • Validación de formularios • Menus y barras de menús • Google y Yahoo! Maps

API AJAX

• Prototype (http://prototype.conio.net/)

• Framework en JavaScript para el desarrollo sencillo y dinámico de aplicaciones web • Proyectos basados en Prototype: • Ruby on Rails (http://www.rubyonrails.com/) • script.aculo.us, Thomas Fuchs (http://script.aculo.us/) • Rico (http://openrico.org/) • Behaviour (http://www.ripcord.co.nz/behaviour/)

• Existen otras como Script.aculo.us, Spry de Adobe, etc.

• Gmail: • • • •

Ejemplo de Aplicaciones

Gmail (http://gmail.com) Google Maps (http://maps.google.com/) Google Suggest (http://www.google.com/webhp?complete=1&hl=en) Google Calendar(http://www.google.com/calendar/)

• Microsoft:

• Windows Live Mail (http://mail.live.com) • Windows Local Live(antes MSN http://local.live.com)

Virtual

• Amazon Maps (http://maps.a9.com/) • Amazon: (http://www.a9.com) • HousingMaps (http://www.housingmaps.com/), con

Earth,

Ejemplo de Aplicaciones

• Aplicaciones de Escritorio:

• Suite de oficina • gOffice (http://www.goffice.com/) • Thinkfree(http://online.thinkfree.com/) • Zimbra (http://www.zimbra.com) • Procesadores de texto • Writely (http://www.writely.com) • FCKeditor(http://www.fckeditor.net/) • Hoja de cálculo • Num Sum (http://numsum.com) • Numbler (http://numbler.com/)

Ejemplo de Aplicaciones

• Notas: • Webnote(http://www.aypwip.org/webnote/)

• Lector RSS: • Backbase (http://www.backbase.com/demos/RSS/) • Netvibes (http://www.netvibes.com/) • Mensajería instantánea: • Meebo (http://www.meebo.com/) • IM (http://ajaxim.unwieldy.net/) • Gestor de bases de datos (http://www.turboajax.com/turbodbadmin/)

MySQL

Ejemplo de Aplicaciones • Sistema Operativo (http://www.michaelrobertson.com/ajaxos/)

• AJAXLaunch • AJAXWrite : Procesador (http://www.ajaxlaunch.com/ajaxwrite/)

textos

• AJAXSketch: Editor gráfico (http://www.ajaxsketch.com/) • Eyespot: Reproductor de Video (http://www.eyespot.com/) • ajaxXLS: Hojas de cálculo (http://www.ajaxxls.com/) • ajaxTunes: Reproductor de música (http://www.ajaxtunes.com/) • ajaxOS: Sistema Operativo (http://www.myajaxos.com/)

basado

Linspire

Javascript no obstrusivo

• La principal problemática de Javascript es que muchos navegadores no tienen soporte para Javascript o bien está deshabilitado por razones de seguridad. • Este motivo origina que las páginas Web no sean accesibles por todos los navegadores. • Esta problemática se puede solucionar con la separación de javascript del código XHTML.

Javascript no obstrusivo

• A esta técnica se le llama Javascript no obstrusivo, que correctamente se debería de llamar no invasivo o Accesible. • Lo que se pretende es separar el comportamiento (Javascript) del contenido (XHTML) y de la presentación (CSS) de las páginas. • A continuación se muestra un pequeño ejemplo de ello.

Javascript no obstrusivo

• Tradicionalmente se tiene el código Javascript de la siguiente forma: • <input type="text" name="fecha" onchange="validateDate(this);" /> • <script type="text/javascript" src="archivoJavascript.js"></script> • Sino se tiene Javascript no se podrían aplicar validaciones a un formulario.

Javascript no obstrusivo

• <form name="formulario" action="recibidor.php" method="post"><input type="text" name="fecha" id="campoFecha" /><button type="submit">Enviar</button></form> • Si se deja esta forma la validación se hace en el servidor pero puede ser más tardado y con mayor carga de trabajo para el servidor. Si se utiliza Javascript no obstrusivo puede mejorarse la validación.

Javascript no obstrusivo

• // Función de validación • function validaFecha() { • var elCampo = document.getElementById("campoFecha"); var resultado = /^\d{2}\/\d{2}\/\d{4}$/.test( elCampo.va lue ); • if( resultado ) return resultado; • else { • alert("El formato de fecha es dd/dd/dddd");return false;}

Javascript no obstrusivo

• // Función que añade un evento a un objeto del DOM • function listen(event, elem, func) { • if (elem.addEventListener)// W3C • return elem.addEventListener(event,func,false); • else if (elem.attachEvent)// IE • return elem.attachEvent("on"+event, func); • else {throw "No es posible añadir evento";return false;}

Javascript no obstrusivo

• // Asociamos al evento submit del formulario la función validaFecha • var elFormulario = document.forms["formulario"];listen("submi t", elFormulario, validaFecha); • Si se tiene Javascript se agrega este código en XHTML vía DOM sino se tiene no se agrega pero las validaciones tienen que hacerse en el servidor.

Javascript no Obstrusivo

• Reglas del Javascript no obstrusivo:

• Nunca, bajo ninguna circunstancia incluyas javascript directamente en el documento. • Javascript es una mejora, no un sistema de seguridad. • Revisa la disponibilidad de un objeto antes de acceder a él.

Javascript no Obstrusivo

• Crea un Javascript no especifico para un navegador • No uses variables de otros scripts. • Mantén los efectos independiente

ratón

forma

Microformatos

• Los microformatos permiten agregar contenido semántico a la Web. • Son una forma simple de agregar significado semántico a un contenido legible por el humano y que para la máquina es sólo texto plano. • Los microformatos son mantenidos especificados por Microformats.org

Microformatos

• Los microformatos se aregan a través de los atributos de XHTML: class, rel y rev. • Por ejemplo, en el texto "Las aves anidaron en 52.48,-1.89" los números pueden ser entendidos, de acuerdo con el contexto, como coordenadas geográficas. • Las aves anidaron en <span class="geo"> <span class="latitude">52.48</span>, <span class="longitude">-1.89</span> </span>

Microformatos

• En el ejemplo anterior se microformato “geo” para ubicaciones geográficas.

utilizó el especificar

• Se necesita de una aplicación específica para procesar microformatos o bien, una araña o analizador semñantico. • Existen muchos microformatos como: hCard, hCalendar, xFolx, XFN, XOXO, etc.

JSON

• Javascript Object Notation es un formato ligero para el intercambio de datos. Actualmente es muy utilizado como remplazo de XML en aplicaciones Java • Se accede con el método eval • var http_request = new XMLHttpRequest(); • var url = "http://example.net/jsondata.php"; // Datos en JSON

JSON

• handle_json; • http_request.open("GET", url, true); • http_request.send(null); • function handle_json() { • if (http_request.readyState == 4) { • if (http_request.status == 200) { • var json_data http_request.responseText;

JSON

• } else { • alert("Ha habido un problema con la URL."); } http_request = null; }} • Ejemplo de JSON • {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}

JSON

• Equivalencia con XML:

• <menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup></menu>

Accesibilidad y Usabilidad en la Web M.C. Juan Carlos Olivares Rojas

Accesibilidad y Usabilidad

• La accesibilidad en general parte del sustento de que una interfaz de un sistema debe de poder utilizarse con cualquier usuario sin importar sus capacidades diferentes (debilidades visuales, auditivas, cognitivas, etc.) • La accesibilidad Web está enfocada en estructurar de manera adecuada el código Web para que este pueda ser visualizado por cualquier navegador.

Accesibilidad y Usabilidad

• La usabilidad está enfocada en cómo se desarrolla las páginas Web para que sean más fáciles de manejar por todos los usuarios. • En cuestión de accesibilidad el W3C a definido el WAI (Web Accessibility Iniative) como estándar.

Recomendaciones Web

• A continuación se muestran algunas recomendaciones en el desarrollo de aplicaciones Web accesibles y usuables. • Nunca cambiar el tamaño de la pantalla del sitio al usuario. • No se debe cargar una página señuelo y luego con un popup cargar el sitio. • No se le debe preguntar al usuario que tipo de sitio desea ver, el bueno y el malo.

Recomendaciones Web

• Ningún sitio debe estar construido totalmente con Flash. • No pretender reinventar la navegación de los sitios Web. • El contenido de un sitio Web es lo más importante.

Recomendaciones Web

• No utilizar texto parpadeante, ni Frontpage, ni popups, ni enlaces automáticos, ni textos en scroll, ni introducción en Flash, etc. • Si la página tiene música se debe tener un mecanismo para apagarla, mucho mejor si no se activa al iniciar.

Recomendaciones Web

• Los menús de navegación son mejor en texto que en imágenes. • Un flujo de navegación con subsecciones es mejor que un menú desplegable. • Si la única forma de encontrar algo en tu sitio es a través de un buscador, tu sitio no tiene un buen flujo de navegación.

Recomendaciones Web

• Cuida el tiempo que la página tarda en cargarse. • No se debe de guiar al usuario de manera determinada hacia algo del sitio sin tener opción de escape.

Recomendaciones Web

• No te molestes en preguntarle al usuario el tipo de reproductor de medios, escoge algo genérico como Youtube. • No utilices tecnologías nuevas simplemente por usar, hay que cerciorarse que realmente ayudarán al usuario.

Leyes del diseño de interfaces •

Una computadora no debe causar daño al trabajo del usuario, o por inacción, permitir que el trabajo del usuario reciba algún daño.

•

Una computadora no debe hacer perder tiempo al usuario u obligarlo a trabajar más de lo que es estrictamente necesario.

Leyes del diseño de interfaces

• Los usuarios establecen el límite de una interacción. • Buen diseño de interfaces: (Eliminar) • La opción que va a realizar no puede desecharse. Si desea continuar escriba la décima palabra de este cuadro de diálogo.

Leyes del diseño de interfaces

• La ergonomía es una cuestión importante a considerar. • Expulsar discos a través de un comando es mejor que utilizar un botón. • La mejor manera de hacer distinguir su interfaz, es hacer que está funcione.

Optimización páginas dinámicas

• Escribir todos los mensajes de una vez. <% Response.Write “Hola, ” %> <% Response.Write “mundo” %> <%

Response.Write “Hola, ” Response.Write “mundo”

• No imprimir valores constantes

Reducir el número de páginas

• Entre menos páginas se tengan es más fácil encontrar errores. • Hacer la validaciones de formularios en la misma página. • Comprobar que no existan campos vacíos

Utilización de variables

• Utilizar declaraciones de variables forzosamente (Option Explicit) o bien tener un esquema de control de variables. • ¿Cuál es el resultado de la siguiente expresión: <% alpha= 2 beta = 2 kappa = alfa + beta %>

Utilización de variables

• Utilice un sistema para asignar nombres a las variables como el sistema húngaro: bte = byte, str= string. Por ejemplo, sintCuenta representa la variable Cuenta del tipo entero con signo. • Evitar que las variables sobrevivan en múltiples páginas (evitar el uso de variables globales, de sesión, aplicación, etc.)

Conexión a base de datos

• Utilice las conexiones el menor tiempo posible (cerrar conexiones innecesarias) • De ser posible, almacenados.

utilizar

• Paginar los Recordsets.

procedimientos

Diseño Web

• La Web no está hecha de papel. • Los navegadores permiten el cambio de opciones de accesibilidad. • Las páginas Web tienen capas. La Web se basa en el principio Single Input - Multiple Output. Se escribe una vez, en papel, pantalla, PDF, screenreader, etc.

Diseño Web

• Diseño Web conforme a los estándares (Design with Web standards) • Diseño Web sin barreras (“Accesibility”) • Flexibilidad (Bullet Proof Web Design) • Optimización para motores de (Search Engine Optimization)

búsqueda

Diseño Web

• Las primeras páginas fueron sencillas posteriormente apareció la etiqueta font y table. • Las hojas de estilo en cascada CSS permiten separar contenido y formato. • Las páginas Web están hechas de cuadros rectangulares.

Diseño Web

• HTML es el albañil y CSS es el decorador. • HTML no se programa, sólo se escribe. • HTML no describe como se muestra una página, sino solamente la estructura.

Usabilidad

• La mejor ayuda es el sentido común. • Si alguna cosa es breve es más fácil que se use. • Si algo es complicado de utilizar, simplemente no lo utilizamos tanto.

¡No me hagas pensar!

• Nada importante debe estar a dos clicks de importancia. • Todos estamos unidos a 6 clicks de distancia • Se debe hablar el lenguaje de los usuarios

¡No me hagas pensar!

• Elimine la mitad de las palabras de un texto, después elimine la otra mitad, ¿Se entiende el texto? • Rótulos: trabajos, ofertas de trabajos, Ramade-trab. • Búsqueda de libros, en lugar de autor, título, editorial

¡No me hagas pensar!

• Todo no se puede hacer tan obvio.

• En Internet la competencia es cuestión de un solo clic aquí o allá, de tal manera que si frusta a los usuarios estos se irán.

¿Cómo usamos realmente la Web? • No leemos las páginas, las hojeamos. – Normalmente tenemos prisa – Sabemos que no hay que leerlo todo

• Lo que los diseñadores crean es diferente a lo que los usuarios ven. • No tomamos decisiones óptimas.

¿Por qué no tomamos la mejor opción?

• Normalmente tenemos prisa.

• Las consecuencias por el error cometido no son tan importantes. • El sopesar diversas opciones no garantiza la mejora de nuestras oportunidades. • Adivinar es más divertido.

Las convenciones favorecen la Web • Son muy útiles. • Los diseñadores son muy tercos a utilizarlas demasiado. • Si no existen convenciones, se deben realizar innovaciones que sean fáciles de usar.

Eliminar ruido de las páginas

• Negocio-abigarrado. Existen muchas cosas que distraen al cliente. • Eliminar el ruido de fondo. • El ruido visual no es tan sencillo de determinar.

El arte de no escribir en la Web

• Omisión de palabras innecesarias

• A los dibujos se les puede omitir líneas innecesarias y siguen transmitiendo el mismo mensaje. • Reducir palabras ayuda a: eliminar ruido de la página, hace el sitio más práctico y en un solo vistazo el usuario puede ver más.

El arte de no escribir en la Web

• El discurso innecesario tiene que desaparecer. • Hay que eliminar las instrucciones. • Un usuario no utilizará un sitio Web sino se siente cómodo al utilizarlo

Diseño de la navegación

• Se debe tener un sitio bien señalizado para que los usuarios puedan navegar bien. • Se recomienda tener una especie de asistente en algunos casos para encontrar cosas que no se ven fácilmente. • Generalmente los usuarios deciden hechar un vistazo. Se debe atraerlos.

Diseño de la navegación

• Se debe dar sentido de dirección a los usuarios (se pueden desplazar por donde quieren) • Se debe ubicar a los usuarios en donde se encuentran actualmente. • Tenga atajos cortos para los usuarios.

Propósitos de navegación pasados por altos

• Nos ofrecen un lugar donde no nos perdamos. • Nos dicen lo que hay en cada lugar. • Nos enseña a usar el sitio.

• Nos permite confiar en las personas que han creado el sitio Web.

Si la vida da limones

• No averiguamos el funcionamiento de las cosas. No las arreglamos. • En los motores de búsqueda muchas personas introducen URLs. • Si damos con algo que funciona seguimos con ello.

Diseño de rótulos 101

• Creación de una jerarquía visual clara • Aprovechamiento y uso de las convenciones. • Dejar bien claro sobre lo que se puede hacer clic. • Minimzar el ruido.

Creación de una jerarquía visual clara

• Lo más importante prominente.

ser

más

• Lo que está relacionado lógicamente, también lo está visualmente. • Todo se engloba visualmente bien para que queden delimitadas las partes que pertenecen a cada bloque.

Las convenciones favorecen la Web • Son muy útiles. • Los diseñadores abusan mucho de ellas. • Si no existen convenciones se debe innovar con cosas sencillas de utilizar

Eliminar ruido de las páginas Web • Negocio-abigarrado. Existen muchas cosas que distraen a los usuarios. • Ruido de fondo. Se deben eliminar todas aquellas cosas que no tengan que ver con el propósito de la página. • Si a las imágenes se les eliminan algunas líneas, siguen transmitiendo el mismo mensaje.

El arte de no escribir en la Web

• Omisión de palabras innecesarias.

• Eliminé la mitad de las palabras y luego vuelva a eliminar la otra mitad. • Al reducir palabras se obtienen los siguientes beneficios: reduce el nivel de ruido de la página, se hace más práctica y los usuarios ven más contenido con menos espacio.

El arte de no escribir en la Web

• El discurso innecesario tiene que desaparecer. • Hay que eliminar instrucciones. • Un usuario no utilizará un sitio Web sino se siente cómodo al utilizarlo.

Diseño de la navegación

• Se debe dar sentido de dirección a los usuarios (que se puedan desplazar donde quieran). • Se debe dar sentido de ubicación para que los usuarios no se pierdan. • Se deben tener atajos para acceder a los recursos.

Diseño de navegación

• Se debe mantener una navegación coherente en todas las páginas. Las excepciones: página principal y formularios. • Se debe mantener un botón inicio (similar a la opción deshacer). • Se debe tener un método para buscar.

Diseño de navegación

• No se deben tener más de cuatro niveles de profundidad. • La navegación debe ser como el sistema de carreteras. • Todos los caminos tienen nombre y están ubicados en un lugar adecuado.

Diseño de navegación

• El nombre debe ser prominente y hacer referencia a lo que se hizo clic. • Las pestañas son buena opción de navegación (amazon). • Se debe hacer énfasis en el diseño de la página principal.

• • • • • • • •

Diseño de la página principal

Identidad y misión del sitio. Jerarquía del sitio. Búsqueda. Sugerencias. Contenido temporal Transacciones Accesos directos Registro

Diferentes tipos de usuario

• Cada usuario tiene una visión diferente de los sitios Web: Presidente ejecutivo, desarrollador, diseñador, desarrollo comercial. • Cualquier diseño debe probarse antes de utilizarse. • Es mejor realizar pruebas frecuentes que pruebas hasta el final.

Características de las pruebas de usabilidad

• Demasiado usuarios trae conflictos, pocos usuarios no dejan de ver todos los detalles. Lo ideal es utilizar 5 usuarios. • Las pruebas de usabilidad se deben hacer frente a los expertos. • Se debe hacer un plan de pruebas que permita obtener todos los detalles del sitio.

Plan de pruebas de usabilidad

• Se debe hacer un análisis de los resultados obtenidos. • Algunos ejemplos: los usuarios no saben lo que quieren, las palabras que buscan no están, las cosas están más adelante. • Los sitios deben tener claridad humana.

Accesibilidad

• Las personas con accesibilidad tienen mucho dinero. • Todo el mundo tiene el derecho de acceso a la información. • El 65% de la población presenta algún tipo de discapacidad.

Accesibilidad

• Añada texto alternativo a todas las imágenes • Hacer que todo contenido sea accesible desde teclado. • No utilizar Javascript sin una buena razón.

Accesibilidad

• No se deben pedir muchos datos.

• No añadir “adornos” a los sitios. • Se debe hacer un análisis de cómo las personas compran.

La Web no se diseño para imprimirse

• No hay un tamaño fijo de la página

• Los usuarios pueden cambiar el tamaño de las fuentes. • Los usuarios pueden utilizar su propia hoja de estilo en cascada. • El tamaño de la pantalla puede ser muy pequeño o grande

Consideraciones

• El tiempo de espera de una página no debe ser mayor a 8 segundos (+/- 2). • Es vital reducir el tamaño del código fuente dado que implica mayor latencia. • Reduciendo blancos se puede optimizar el tamaño de una página.

Consideraciones

• Se debe reducir la dependencia a archivos externos como imágenes y otros recursos. • Los comentarios se pueden reducir en la versión final optimizando el código. • Existen herramientas llamadas “crunch” que ayudan a a eliminar los excesos de códigos.

Crunches de Javascript

• ECMAScript Cruncher

• Javascript Crunchinator • JSCruncher • La ofuscación de código Web puede ayudar a disminuir hasta el 65% el tamaño de un sitio Web.

Dynamic Code Ofuscation (DCO) • La ofuscación de código dinámico no es algo relativamente nuevo, pero ha despertado interés por el auge de lenguajes interpretados sobre la Web: HTML, XML, Javascript, etc. • La ofuscación refactorización.

ejemplo

DCO

• La ofuscación consiste en la ocultación de código para proteger de posibles pirateos • La refactorización es la transformación de un programa internamente, sin afectar la funcionalidad externa. • Algunos ofuscadores encuentra Blue Clam.

Javascript

Ofuscación

• La ofuscación consiste en confundir, por lo que se comprime el código en menos líneas, se cambian nombres de variables y el flujo de control. • Aun ofuscando el código, éste puede ser robado y entendido.

Referencias

• Musciano, C. (2009), HTML & XHTML: The Definitive Guide, 5th Edition, Oreilly. Estados Unidos • Flanagan, D. (2009), JavaScript: The Definitive Guide, 4th Edition. Oreilly. Estados Unidos. • Ferreira, R. (2009), Material del curso de programación Web, Instituto Tecnológico de Morelia. Estados Unidos.

Referencias

• Meyer, E. (2009), Cascading Style Sheets: The Definitive Guide, 2nd Edition. Estados Unidos • H. Deitel, et. al. (2004), “Como programar en C++”, cuarta edición, Pearson Prentice Hall, México. • Wilson, P. (2004), Beginning JavaScript, 2nd Edition. Wiley Publishing, 2004. ISBN: 0-7645-5587-1.

Referencias

• Compiladores (2006). Principios Técnicas y Herramientas. Aho, Sethi, Ullman. Pearson Addison-Wesley. • J. Cole, (2007) “19 Things NOT To Do When Building a Website”, consultado: mayo 2007, http://www.josiahcole.com/2007/02/14/awebmasters-19-commandments/

Referencias

• J. Raskin (2001), “Diseño de sistemas interactivos”, Addison-Wesley, México, 2001, ISBN: 970-26-0038-3, pp. 272. • D. Ferguson, (2001) “ASP sin errores”, McGraw-Hill, España, 2001, ISBN: 84-4813182-7. • “CSS, un juego de niños”, (2007) PC Cuadernos, España, ISBN: 2-915605-62-9.

Referenicas

• S. Krug (2006), “No me hagas pensar”, segunda edición, Pearson Prentice Hall, España, 2006, ISBN: 84-8322-286-8, pp. 210. • A. King (2003), “Optimización de Sitios Web. Un Detallado Análisis sobre la Reducción de los Tiempos de Descarga”, Anaya Multimedia, España, 2003, ISBN: 84-415-1579-4.