Tecnologas Web Ajax

Alejandro Apaza Tarqui Universidad Nacional del ALTIPLANO PUNO - PERU apazatarqui@hotmail.com

Bases de Datos Avanzado

Proyecto
Desarrollar un sitio Web de publicidad de un producto cualquiera utilizando los estndares Web. Bsicamente se tendr una pgina de inicio, una con informacin de la empresa, pgina de contacto y la pgina de descripcin del producto. Se tendr un buen diseo. La World Wide Web o simplemente Web es un servicio de hipertexto que se ejecuta sobre Internet. Actualmente es el servicio de Internet ms 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 aplicacin.

Introduccin
La Web basa su funcionamiento principalmente en el formato HTML. La Web ms que hipertexto recibe el nombre de hipermedia dado que adems del texto y los enlaces (caracterstica fundamental del hipertexto) puede representar la informacin en diferentes formatos: imgenes, sonidos, animaciones, video. Los primeros sitios Web estaban enfocados en la investigacin y la docencia, posteriormente se le vio el xito comercial. La Web es el medio para realizar comercio mas no es el fin. A continuacin 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 artculoInformation 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 direccin del primer sitio web y del primer servidor web, corriendo en una computadora NeXT en el CERN. La primera pgina web fu: http://info.cern.ch/hypertext/WWW/TheProject.html la cual informaba acerca del proyecto WWW e inclua detalles para que los visitantes pudieran crear su propia pgina Web.

Primera pgina Web

Primer Navegador Web: Mosaic

Netscape
En marzo de 1994, Marc Andreessen y sus compaeros 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 Mosaic Netscape 0.9 y posteriormente renombrado Netscape Navigator. En 3 aos la compaa Netscape creci de 3 empleados a 2600 y tener un valor de 765 millones de dlares. El navegador Navigator lleg a ser utilizado por el 80% de los usuarios de internet hasta que surgi el Explorer de Microsoft. La compaa fue comprada por AOL y el 1 de marzo del 2008 se termin el soporte oficial del navegador.

Web 2.0
El trmino Web 2.0 fue acuado por Tim O'Reilly en 2004 para referirse a una segunda generacin 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 colaboracin y el intercambio gil de informacin entre los usuarios. 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 programacin. La Web 2.0 no es un cambio radical de tecnologa, se sigue utilizando HTTP, HTML, JavaScript y muchas de las tecnologas que han surgido, aunque se usan de otro modo.

Web 2.0

Web 1.0 vs Web 2.0

Concepto
Quines publican usuarios
Informacin de sitios

Web 1.0

Web 2.0
productores y

Los productores de los sitios

Centralizada

Dispersa en miles

Publicidad

Slo grandes presupuestos

El sitio web

Cualquier persona
Los usuarios XHTML y CSS

Dueo de la inform. Tecnologa

HTML 4.0

Disponibilidad

Al final de cada proyecto

Beta perpetuo
Sitios con APIs

Posibilidad de usar Ninguna servicios de otros

Web 1.0 vs Web 2.0

Concepto Web 1.0 Web 2.0

E-mail Hotmail Publicidad DoubleClick AdWords Mapas MapQuest Fotografas Ofoto Sitios de usuarios Geocities Buscador Altavista Enciclopedia Encarta Informacin Slashdot Oficina --Compras Amazon

Gmail Google
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 ms ventajas que las tradicionales aplicaciones Web. Esta surge como una combinacin de las ventajas que ofrecen las aplicaciones Web y las aplicaciones tradicionales. Las aplicaciones web tradicionales tienen poca capacidad multimedia (para ver un vdeo es necesario usar un programa externo para su reproduccin)

RIA

RIA
Las principales caractersticas de este tipo de aplicaciones son: Experiencia rica del usuario Capacidad Offline Productvidad alta del desarrollador Flexibilidad Fciles de administrar, distribuir y actualizar Las principales desventajas que representa esta tecnologa son dos: Forma de navegar (navegacin por hipervnculos con retardo entre pginas) Botn atrs: las aplicaciones RIA tienen slo una forma de interaccin por lo que al aplicar dicho botn se sale de la aplicacin.

Navegacin en RIA

Segunda guerra de navegadores

Con la aparicin de la Web los navegadores Netscape e Internet Explorer se enfrascaron en una guerra resultado vencedor este ltimo a principios de la dcada del 2000. En estos momentos se est librando otra batalla donde los competidores son:

Adoble Flex
Flex es un producto de Adobe y una plataforma que genera aplicaciones RIA basadas en la plataforma Flash, con un entorno de trabajo y un modelo pensado especficamente para este tema y no para el mundo de la animacin. Flex es el nombre de la plataforma que incluye: Flex Builder: Entorno de desarrollo comercial basado en Eclipse. Flex SDK: Compilador gratuito que toma el cdigo 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 grficos estadsticos.

Otras Tecnologas RIAs

OpenLaszlo: es una plataforma Open Source de la empresa Laszlo Systems, que genera aplicaciones RIA a partir de un lenguaje de marcado XML conocido como LZX y cdigo ECMAScript. Microsoft Silverligth: Cuando Microsoft lanza Windows Vista, tambin lanz un subsistema (compatible con XP y 2003) llamado Windows Presentation Foundation (WPF) que es relanzado para la web como Silverlight, para su funcionamiento, los navegadores requieren un plugin. Java WebStart: Esta tecnologa 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 vnculo en una pgina Web.

Estndares Web
XHTML 1.0 or superior CSS Level 2 DOM Level 2 ECMAScript 262 (current JavaScript) http://www.webstandards.org/about/ XHTML (estructura y semntica del contenidos) Cascading Style Sheets (presentacin del contenido) Javascript (comportamiento e interaccin del sitio Web)

AJAX
Acrnimo de Asynchronous Javascript And XML. Viene a sustituir el trmino DHTML Estas tecnologas 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 hacindolas ms dinmicas. AJAX no es nada nuevo bajo el sol, simplemente es una idea nueva y brillante de utilizar tecnologas existentes. AJAX no es un estndar 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 programacin.

Introduccin
AJAX no es un estndar y esto ha sido una de sus principales problemticas. AJAX trae de vuelta el nfasis en el procesamiento del lado cliente, despus de haberse centrado muchos aos en las tecnologas del lado del servidor. Una de las problemticas que presenta es que existen diversos caminos de interaccin. Generalmente la asincrona se ve reflejado en el refresco de las pginas pero no es la nica forma. El asincronismo se logra a travs del objeto XMLHTTPREQUEST. Antes de entrar a detalle se vern las distintas tecnologas 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 aplicacin (tercer refresco)

Aplicacin Web con AJAX

No existe el refresco de la aplicacin.

Ejemplos de utilizacin de AJAX

Google Suggest Google Earth Facebook

Aplicaciones Sncronas

Aplicaciones Asncronas

Programacin Web del lado del Cliente

La programacin 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 estndares para la programacin de aplicaciones Web en el lado cliente (XHTML/CSS/DOM/Javascript) se describir bsicamente lo que son las tecnologas XML.

Tecnologas XML
Alejandro Apaza Tarqui. FINESI UNAP.

XML
eXtensible Markup Language (Lenguaje de Marcado eXtensible) Es un metalenguaje
Lenguaje que describe a otros lenguajes

XML slo define el lenguaje, lo que se realice con l depende de la aplicacin. Es de un lenguaje de marcado por que utiliza etiquetas. Las etiquetas se representan con parntesis 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 construccin, como etiquetas agregadas al lenguaje, etiquetas que no cierran Los documentos de XML tienen dos caractersticas principales: estn bien estructurados y son vlidos. Se dice que un documento est bien formado si para cada etiqueta del lenguaje no tiene errores lxicos. Se dice que un documento es vlido cuando se representan los elementos del lenguaje con un orden y significado adecuados, a esto se le denomina no tener errores sintcticos y semnticos.

XML
Determinar si un documento est bien formado consiste en verificar que cumpla la sintaxis correcta de html <img src=imagen.jpg> Vlido en HTML Pero no vlido en HTML XHTML es la versin de HTML con la sintaxis estricta de XML. <img src=imagen.jpg> </img> <img src=imagen.jpg/> <IMG src=imagen1.jpg/> no es vlido <imagen/> Es correcta (podra ser valida)

Estructura de un documento en XML

<? xml >? <raz>
<etiqueta1>
<otra>Valor</otra>

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

</raz> Algunas herramientas: XRAY XMETAL XML Spy XML Notepad Visual .NET y otros entornos de programacin

XML
Otros lenguajes que utilizan XML son: WML Lenguaje para pginas Web en dispositivos mviles XHTML-MP La nueva versin para pginas Web en dispositivos mviles siguiendo la sintaxis de XHTML. MathML Lenguaje para crear ecuaciones XML es un lenguaje en texto plano por lo que la seguridad es mnima. VoiceXML es un lenguaje para representar voz. La versin ms actual de XML es la uno. Est por aparecer la segunda versin.

Otros lenguajes basados en XML

VRML Realidad Virtual RDF Descripcin de Recursos OWL Ontologas SOAP Transporte de servicios Web WSDL Descripcin de servicios Web UDDI Encontrar servicios Web XUL/XAML Interfaces de usuario SVG Imgenes virtuales

Arquitectura de XML

SMIL SpeechML XUL XHTML MathML RDF

HTML TEI
... ...

XML SGML

Islas XML.
XML dentro de una pgina 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> Isla XML <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> ...

Dnde coinciden el XML y las BD?

Capturar

XML
Base de datos

XML

Consultar

XML
Mantener

XML

BD

XML

BD

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 presentacin (como el HTML).

Exportar en XML.
Crear vistas lgicas 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 lgica de negocios Nivel de presentacin

BD s

Aplicacione s

Navegad or

Ejemplos de XML A continuacin se muestran algunos ejemplos de lo que se puede hacer con XML.
Scalable Vector Graphic (SVG) Es un formato basado en XML cuya finalidad es mostrar grficos en formato vectorial utilizando la sintaxis de XML. SVG est tomando mucho auge debido a que puede ahorrar espacio en imgenes que son del tipo vectorial El documento en SVG es interpretado por un parser o visor. Los ms famosos son batik y el visor de ADOBE. SVG es un lenguaje de propsito especfico ya que slo sirve para una opcin 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/svg11.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
x2 + 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>

SMIL
Synchronised Multimedia Integration Language
Integracin de contenidos multimedia con texto, audio y video.

Soporte en la mayora del sotware de reproduccin 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" backgroundcolor="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>

Validacin de documentos en XML

Para validar documentos XML existen dos variantes: DTD (Document Type Definition) basado en gramticas BNF XMLSchema basado en XML

Reglas: La DTD del XML.

Una Definicin de Tipo de Documento (Document Type Definition, DTD) permite:
Definir un conjunto especfico de etiquetas con relaciones especficas. Definir valores predeterminados para los atributos. Definir entidades de texto y binarias adicionales junto con sus notaciones. Indicar el elemento raz.

El control de la DTD.
La DTD proporciona:
Una sintaxis formal que sirva de gua a un intrprete/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 creacin de datos.

Declaracin de elementos
<!ELEMENT
Nombre_elemento ( . . . ) PALABRACLAVE >

Apertura y palabra clave. Nombre del elemento. Modelo de contenido o contenido declarado. Cierre.

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

Modelo de contenido.
Elementos o #PCDATA. Conectores.
, | seguido de uno u otro
(a,b) (a|b)

Indicadores de ocurrencia.
Uno y solo uno ? Cero o uno + Uno o ms * Cero o ms
configuracion Nombre? Controlador+ Opciones*

Comentarios XML
Los comentarios pueden aparecer en cualquier parte del documento fuera de otros marcajes. Pueden aparecer dentro de la declaracin de tipo de documento. Un procesador XML puede, pero no requiere, ser capaz de leer y recuperar los comentarios.
<!-- Articulos secundarios para BD, revisado el 2000/I/29 -->

Declaracin de atributos
<!ATTLIST Apertura y palabra clave. Nombre_elementoNombre del elemento. Nombre_atributoNombre del atributo. ( . . . ) Lista de valores o PALABRACLAVE valor declarado. . . . Valor predeterminado o #PALABRACLAVE palabra clave de valor predeterminado. > Cierre.

Declaracion de documento
<!DOCTYPE Apertura y palabra clave. Elemento_raiz Nombre del elemento raz. 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 SYSTEM AudioCollection.dtd> <audiocollection> <! Esta es la seccin de Rock de la coleccin --> <audio type=rock review=5 year=1995>

Ejemplo
<title>La carretera </title> <artist>Julio Iglesias</artist> <track>La carretera</track> <comments>Gran lbum </comments> </audio> </audiocollection>

DTD
<!ELEMENT audiocollection (audio)+>
<!ELEMENT audio (title, artist+, track+, comments?)> <!ATTLIST audio
type (rock | pop | jazz | classical | country | soul | hiphop | comedy | other) rock review (1 | 2 | 3 | 4 | 5) 3 Year CDATA #IMPLIED>

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

XMLSchema
<?xml version=1.0?>
<Schema name=AudioCollectionSchema xmlns =urn:schemas-microsoft-com:xml-data xmlns:dt=urn:shecmas-microsoft-com:datatypes>
<ElementType name=title content=textOnly/> <ElementType name=artist content=textOnly/> <ElementType name=track content=textOnly/>

XMLSchema
<ElementType name=comments content=textOnly/> <AttributeType name=type dt:type=enumeration dt:values=rock pop jazz classical country soul hiphop comedy other default=3/> <AttributeType name=review dt:type=enumeration dt:values=1 2 3 4 5 default=3/> <AttributeType name=year dt:type=int/>

XMLSchema
<ElementType name=audio content=eltonly>
<element type=title minOccurs=1 maxOccurs=1/> <element type=artist minOccurs=1 maxOccurs=*/> <element type=track minOccurs=1 maxOccurs=*/> <element type=comments minOccurs=0 maxOccurs=1/> <attribute type=type/> <attribute type=review/> <attribute type=year/>

</ElementType>

XMLSchema
<ElementType name=audiocollection content=eltOnly>
<element type=audio minOccurs=1 maxOccurs=*/>

</ElementType>

</Schema>

XPath
Es una tecnologa XML que sirve para recorrer un documento XML (es una estructura tipo rbol) Sirve de base para otras tecnologas como XSL y Xpointer / indica la raz /pantalla hace referencia a una etiqueta <pantalla> de nivel principal

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 dndole otros formatos. Agrega estilos a documentos XML mediante reglas especiales de formatos. Esto se realiza por medio de dos tecnlogas XSLT y XSL-FO

Cmo funciona el XSL

Arbol fuente (XML)

XSL
Arbol resultado (xmlsn:fo)
Intrprete

Transform. XSL

Intrprete

Intrprete

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; fontfamily: 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 cdigo 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
<xsl:if test=condicion> . . . </xsl:eval>

Evalua una condicin, si el nodo actual retorna un valor, entonces se considera verdadera la condicin.

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

XSLT
XSL Transformation
Lenguaje fuente (XML) + (plantilla de transformacin + 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
<table> <xsl:for-each order-by=+ review select=audiocollection/audio> <tr>
<td><xsl:value-of select=artist /></td> <td><xsl:value-of select=title /></td> <td><xsl:value-of select=@review /></td>

</tr> </table>

XSLT
<xsl:template match=comments>
<b>Comentarios:</b><br/><xsl:value-of/><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>Coleccin 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>Ttulo: </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 navegacin de los documentos sean ms 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#observaciones

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>

Ubicacin DTD
<!DOCTYPE nombre SYSTEM URL>
Forma FPI (Formal Public Identifier) //reconocido//dueo//descripcin//idioma <!DOCTYPE nombre PUBLIC -//MPE//DTD Ejemplo version 1.0//es URL> Reconocido: + o -

Espacios de nombres
Varios lenguajes pueden utilizar las mismas etiquetas y si se llegan a combinar podran resultar problemas.
<pelcula>: <ttulo>, <director>, <ao> <postulante>: <ttulo>, <experiencia>, <idioma>, <residencia> <pelcula:ttulo><postulante:ttulo>

Espacios de nombres
<?xml version=1.0?> <pos:postulante xmlns:pos=URL> <pos:ttulo>tec morelia</pos:titulo> <pf:pelcula xmlns:pf=URL2> <pf:ttulo>Casa embrujada</pf:ttulo> </pf:pelcula> </pos:postulante>

XHTML

Introduccin
XHTML
Reformulacin de HTML 4.0 en XML

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

Estructura XHTML
Organizacin 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 lnea
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 mayora 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 ttulo a un elemento especfico. style: permite aplicar un estilo a un elemento especfico.

Pgina 90

Atributos en XHTML
Atributos de internacionalizacin
Se pueden aplicar a la mayora 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 espaol). 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 rpido a un elemento. tabindex: permite asignar un orden de tabulacin a un elemento.

Pgina 92

Atributos en XHTML
Eventos
Eventos de formulario
onchange: se ejecuta el script cuando el elemento cambia. onsubmit: se ejecuta el script cuando se enva 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 ratn
onclick: al hacer clic con el ratn. ondblclick: al hacer doble clic con el ratn. onmousedown: al presionar el botn del ratn. onmousemove: cuando se mueve el puntero del ratn. onmouseout: cuando el puntero del ratn se mueve fuera de un elemento. onmouseover: cuando el puntero del ratn se mueve sobre un elemento onmouseup: al liberar el botn del ratn.

Ejemplo de XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>

Estructura Jerrquica

Estructura de Documentos

Los documentos tienen una estructura bien definida

Estructura de Documentos

A nivel de programacin se cuenta con un diseo lgico

Elementos de HTML depreciados en XHTML

Estructura de XHTML
Existen dos tipos de etiquetas: bloques contenedores y elementos Inline.
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
No se recomienda el uso de etiquetas table para el diseo
<div id="article">xxx</div> #article{ width:250px; padding:5px; float:right;}

Span
Spans encierra objetos (texto, grficos) 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 cdigo ms limpio y fcil de mantener.

XHTML
XHTML est enfocado en el fondo del documento (contenido) no en la forma (diseo).
En 1995 Al Gore defini el trmino superautopista de la informacin, no superautopista del diseo. Existen tres tipos de documentos: Transitional, Frameset, and Strict.

XHTML
Estn sustituyendo a HTML, pueden tener la extensin .htm o .html.
Todas las etiquetas que abren deben de cerrar. Se deben cerrar las comillas simples o dobles. Las etiquetas van en minscula

XHTML
El tamao 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 tamao 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 sangras para mejorar la legibilidad del cdigo fuente.
Las etiquetas deben cerrar jerrquicamente, no se permiten anidamientos invlidos. Poga siempre ttulos a las pginas.

XHTML
Coloque los elementos input ocultos al principio del formulario.
Entre ms metadatos se tenga, ser ms fcil posicionar los recursos Web en los primeros lugares. El mtodo GET de HTTP no debe utilizarse para enviar datos, en su lugar debe de utilizarse a travs de POST.

Validacin de Pginas
Se pueden validar la estructura de las pginas XHTML a travs de la URL: http://validator.w3.org
Para validar hojas de estilo CSS se utiliza: http://jigsaw.w3.org/cssvalidator/ Existen otros tipos de validaciones de accesibilidad y certificados de algunas organizaciones.

Sopa de Etiquetas
Se recomienda ampliamente sangrar el cdigo.

Codificacin
Se debe tener mucho cuidado con el esquema de codificacin del documento Web para no tener problemas con smbolos de puntuacin 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 transformacin. No es muy utilizada en lenguajes XML (se recomienda mejor XSL) pero es muy utilizada en HTML y lenguajes de presentacin.

Selectors
Selector es simples p { color: blue } h1, h2, h3, h4 { font-style: italic; }
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

Diseo Visual con CSS

Esquema visual en capas

#logoBranding

#branding

#secondaryContent

#content #mainNav

#subNav

Declaraciones Comunes
Background, background-attachment backgroundcolor, background-repeat border, bottom, color, cursor, display, float, font, font-family, font-size, font-style, font-weight, height, left letter-spacing, line-height, list-style-image, list-style-position, list-styletype, margin, overflow, padding, position, right, text-align, text-decoration, text-indent, text-transform, top, verticalalign, visibility, white-space, width, word-spacing, wordwrap, z-index

Inclusin 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>

Representacin Visual

Otro Ejemplo CSS

<?xml version=1.0 ?> <?xml-stylesheet type=text/css href=ejemplo.css ?> <computador>
<cpu>Informacin</cpu> <teclado class=clase1>Info Teclado</teclado> <raton class=clase2>Info ratn</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

DOM
Document Object Model, Modelo de Objeto Documento es una interfaz de programacin que permite operar con cualquier recurso XML como si fuese una estructura jerrquica tipo rbol.
Para utilizar DOM el documento XML debe de estar bien formado y ser vlido. 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 <BODY> element node <P> text node "This is a..."

element node <HEAD> element node <TITLE> text node "Sample"

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:

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

DOM
Tiene tres elementos funcionales:
Propiedades: className, href, innerHTML, src, style, target, value Mtodos: appendChild, createTextNode, getElementById, setAttribute

DOM
Manejadores de Eventos: onclick, onkeypress, onmouseover, onresize Ejemplo: el objeto ancla <a> Propiedades: accessKey, href, id, tabIndex, target Mtodos: 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 type="button" onclick="swapURL()" value="Change URL!"> </form>

DOM
Los objetos disponibles con DOM para una pgina XHTML son:

Window frame link anchor text document form location applet etc image etc

radio checkbox

Javascript
M.C. Juan Carlos Olivares Rojas

Javascript
Es un lenguaje interpretado con una orientacin 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 TYPE="Button" onClick="alert('Hi there!');" VALUE="Hi">
<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 travs del objeto XMLHttpRequest que a continuacin se describe.

Mtodos de XMLHttpRequest
Mtodo abort() getResponseHeaders() Descripcin Aborta la sesin 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, mtodo (get o post), y "password"]]]) bandera de manipulacin de asincronismo send(content) Enva la peticin con contenido opcional a travs de POST setRequestHeader("label", "value") Inicializa un encabezado a ser enviado con la respuesta

Propiedades de XMLHttpRequest
Mtodo onreadystatechange readyState Descripcin 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 Cdigo numrico de estado HTTP devuelto por la peticin Mensaje de estado HTTP devuelto por el servidor

responseText responseXML status statusText

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 peticin del recurso de forma asncrona 3. Esperar la respuesta

Secuencia de Pasos en AJAX

4 Agregado del script

5. Ejecucin del script y obtencin de resultados de manera asncrona

Secuencia de pasos en AJAX

Ntese que la funcin sndReq construye una peticin pidiendo un parmetro, obteniendo una pgina, asociando el manejador de eventos y no enviando argumentos especiales en la peticin
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 cdigo abierto

Proporciona un API para el control y manipulacin de historial Proporciona en el lado del cliente para la manipulacin de URL y marcadores/favoritos Widgets: Ordenar tablas Validacin de formularios Menus y barras de mens Google y Yahoo! Maps

API AJAX
Prototype (http://prototype.conio.net/)
Framework en JavaScript para el desarrollo sencillo y dinmico 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.

Ejemplo de Aplicaciones
Gmail:
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 Virtual Earth, http://local.live.com)

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

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 clculo 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/) Mensajera instantnea: Meebo (http://www.meebo.com/) IM (http://ajaxim.unwieldy.net/) Gestor de bases de datos MySQL (http://www.turboajax.com/turbodbadmin/)

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

AJAXLaunch
AJAXWrite : Procesador de textos (http://www.ajaxlaunch.com/ajaxwrite/) AJAXSketch: Editor grfico (http://www.ajaxsketch.com/) Eyespot: Reproductor de Video (http://www.eyespot.com/) ajaxXLS: Hojas de clculo (http://www.ajaxxls.com/) ajaxTunes: Reproductor de msica (http://www.ajaxtunes.com/) ajaxOS: Sistema Operativo basado en Linspire (http://www.myajaxos.com/)

Javascript no obstrusivo
La principal problemtica de Javascript es que muchos navegadores no tienen soporte para Javascript o bien est deshabilitado por razones de seguridad.
Este motivo origina que las pginas Web no sean accesibles por todos los navegadores.

Esta problemtica se puede solucionar con la separacin de javascript del cdigo XHTML.

Javascript no obstrusivo
A esta tcnica se le llama Javascript no obstrusivo, que correctamente se debera de llamar no invasivo o Accesible.
Lo que se pretende es separar el comportamiento (Javascript) del contenido (XHTML) y de la presentacin (CSS) de las pginas. A continuacin se muestra un pequeo ejemplo de ello.

Javascript no obstrusivo
Tradicionalmente se tiene el cdigo 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 podran 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 validacin se hace en el servidor pero puede ser ms tardado y con mayor carga de trabajo para el servidor. Si se utiliza Javascript no obstrusivo puede mejorarse la validacin.

Javascript no obstrusivo
// Funcin de validacin function validaFecha() { var elCampo = document.getElementById("campoFecha"); var resultado = /^\d{2}\/\d{2}\/\d{4}$/.test( elCampo.value ); if( resultado ) return resultado; else { alert("El formato de fecha es dd/dd/dddd");return false;} }

Javascript no obstrusivo
// Funcin que aade 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 aadir evento";return false;} }

Javascript no obstrusivo
// Asociamos al evento submit del formulario la funcin validaFecha
var elFormulario = document.forms["formulario"];listen("submit", elFormulario, validaFecha);

Si se tiene Javascript se agrega este cdigo en XHTML va 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. Mantn los efectos de ratn de forma independiente

Microformatos
Los microformatos permiten agregar contenido semntico a la Web.
Son una forma simple de agregar significado semntico a un contenido legible por el humano y que para la mquina es slo texto plano.

Los microformatos son mantenidos y especificados por Microformats.org

Microformatos
Los microformatos se aregan a travs de los atributos de XHTML: class, rel y rev.
Por ejemplo, en el texto "Las aves anidaron en 52.48,1.89" los nmeros pueden ser entendidos, de acuerdo con el contexto, como coordenadas geogrficas. 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 utiliz el microformato geo para especificar ubicaciones geogrficas.
Se necesita de una aplicacin especfica para procesar microformatos o bien, una araa o analizador semantico. 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 mtodo eval var http_request = new XMLHttpRequest(); var url = "http://example.net/jsondata.php"; // Datos en JSON servidor.http_request.onreadystatechange =

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; var the_object = eval("(" + json_data + ")");

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> Conclusin: la misma cosa!!!

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 cdigo Web para que este pueda ser visualizado por cualquier navegador.

Accesibilidad y Usabilidad
La usabilidad est enfocada en cmo se desarrolla las pginas Web para que sean ms fciles de manejar por todos los usuarios.
En cuestin de accesibilidad el W3C a definido el WAI (Web Accessibility Iniative) como estndar.

Recomendaciones Web
A continuacin se muestran algunas recomendaciones en el desarrollo de aplicaciones Web accesibles y usuables.
Nunca cambiar el tamao de la pantalla del sitio al usuario. No se debe cargar una pgina seuelo 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
Ningn sitio debe estar construido totalmente con Flash.
No pretender reinventar la navegacin de los sitios Web. El contenido de un sitio Web es lo ms importante.

Recomendaciones Web
No utilizar texto parpadeante, ni Frontpage, ni popups, ni enlaces automticos, ni textos en scroll, ni introduccin en Flash, etc.
Si la pgina tiene msica se debe tener un mecanismo para apagarla, mucho mejor si no se activa al iniciar.

Recomendaciones Web
Los mens de navegacin son mejor en texto que en imgenes.
Un flujo de navegacin con subsecciones es mejor que un men desplegable. Si la nica forma de encontrar algo en tu sitio es a travs de un buscador, tu sitio no tiene un buen flujo de navegacin.

Recomendaciones Web
Cuida el tiempo que la pgina tarda en cargarse.
No se debe de guiar al usuario de manera determinada hacia algo del sitio sin tener opcin de escape.

Recomendaciones Web
No te molestes en preguntarle al usuario el tipo de reproductor de medios, escoge algo genrico como Youtube.
No utilices tecnologas nuevas simplemente por usar, hay que cerciorarse que realmente ayudarn al usuario.

Leyes del diseo de interfaces

Una computadora no debe causar dao al trabajo del usuario, o por inaccin, permitir que el trabajo del usuario reciba algn dao. Una computadora no debe hacer perder tiempo al usuario u obligarlo a trabajar ms de lo que es estrictamente necesario.

Leyes del diseo de interfaces

Los usuarios establecen el lmite de una interaccin.
Buen diseo de interfaces: (Eliminar) La opcin que va a realizar no puede desecharse. Si desea continuar escriba la dcima palabra de este cuadro de dilogo.

Leyes del diseo de interfaces

La ergonoma es una cuestin importante a considerar.
Expulsar discos a travs de un comando es mejor que utilizar un botn. La mejor manera de hacer distinguir su interfaz, es hacer que est funcione.

Optimizacin pginas dinmicas

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 nmero de pginas

Entre menos pginas se tengan es ms fcil encontrar errores.
Hacer la validaciones de formularios en la misma pgina. Comprobar que no existan campos vacos

Utilizacin de variables
Utilizar declaraciones de variables forzosamente (Option Explicit) o bien tener un esquema de control de variables.
Cul es el resultado de la siguiente expresin: <% alpha= 2 beta = 2 kappa = alfa + beta %>

Utilizacin de variables
Utilice un sistema para asignar nombres a las variables como el sistema hngaro: bte = byte, str= string. Por ejemplo, sintCuenta representa la variable Cuenta del tipo entero con signo.
Evitar que las variables sobrevivan en mltiples pginas (evitar el uso de variables globales, de sesin, aplicacin, etc.)

Conexin a base de datos

Utilice las conexiones el menor tiempo posible (cerrar conexiones innecesarias)
De ser posible, utilizar procedimientos almacenados. Paginar los Recordsets.

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

Diseo Web
Diseo Web conforme a los estndares (Design with Web standards)
Diseo Web sin barreras (Accesibility) Flexibilidad (Bullet Proof Web Design)

Optimizacin para motores de bsqueda (Search Engine Optimization)

Diseo Web
Las primeras pginas fueron sencillas posteriormente apareci la etiqueta font y table.
Las hojas de estilo en cascada CSS permiten separar contenido y formato. Las pginas Web estn hechas de cuadros rectangulares.

Diseo Web
HTML es el albail y CSS es el decorador.
HTML no se programa, slo se escribe. HTML no describe como se muestra una pgina, sino solamente la estructura.

Usabilidad
La mejor ayuda es el sentido comn.
Si alguna cosa es breve es ms fcil 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, despus elimine la otra mitad, Se entiende el texto?
Rtulos: trabajos, ofertas de trabajos, Rama-de-trab. Bsqueda de libros, en lugar de autor, ttulo, editorial

No me hagas pensar!
Todo no se puede hacer tan obvio.
En Internet la competencia es cuestin de un solo clic aqu o all, de tal manera que si frusta a los usuarios estos se irn.

Cmo usamos realmente la Web?

No leemos las pginas, las hojeamos.
Normalmente tenemos prisa Sabemos que no hay que leerlo todo

Lo que los diseadores crean es diferente a lo que los usuarios ven. No tomamos decisiones ptimas.

Por qu no tomamos la mejor opcin?

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 ms divertido.

Las convenciones favorecen la Web

Son muy tiles.

Los diseadores son muy tercos a utilizarlas demasiado.

Si no existen convenciones, se deben realizar innovaciones que sean fciles de usar.

Eliminar ruido de las pginas

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

Omisin de palabras innecesarias
A los dibujos se les puede omitir lneas innecesarias y siguen transmitiendo el mismo mensaje. Reducir palabras ayuda a: eliminar ruido de la pgina, hace el sitio ms prctico y en un solo vistazo el usuario puede ver ms.

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 cmodo al utilizarlo

Diseo de la navegacin
Se debe tener un sitio bien sealizado para que los usuarios puedan navegar bien.
Se recomienda tener una especie de asistente en algunos casos para encontrar cosas que no se ven fcilmente. Generalmente los usuarios deciden hechar un vistazo. Se debe atraerlos.

Diseo de la navegacin
Se debe dar sentido de direccin 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.

Propsitos de navegacin pasados por altos

Nos ofrecen un lugar donde no nos perdamos. Nos dicen lo que hay en cada lugar. Nos ensea 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 bsqueda muchas personas introducen URLs. Si damos con algo que funciona seguimos con ello.

Diseo de rtulos 101

Creacin de una jerarqua visual clara
Aprovechamiento y uso de las convenciones. Dejar bien claro sobre lo que se puede hacer clic. Minimzar el ruido.

Creacin de una jerarqua visual clara

Lo ms importante ha de ser lo ms prominente. Lo que est relacionado lgicamente, tambin 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 diseadores abusan mucho de ellas. Si no existen convenciones se debe innovar con cosas sencillas de utilizar

Eliminar ruido de las pginas 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 propsito de la pgina. Si a las imgenes se les eliminan algunas lneas, siguen transmitiendo el mismo mensaje.

El arte de no escribir en la Web

Omisin 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 pgina, se hace ms prctica y los usuarios ven ms 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 cmodo al utilizarlo.

Diseo de la navegacin
Se debe dar sentido de direccin a los usuarios (que se puedan desplazar donde quieran).
Se debe dar sentido de ubicacin para que los usuarios no se pierdan. Se deben tener atajos para acceder a los recursos.

Diseo de navegacin
Se debe mantener una navegacin coherente en todas las pginas. Las excepciones: pgina principal y formularios.
Se debe mantener un botn inicio (similar a la opcin deshacer). Se debe tener un mtodo para buscar.

Diseo de navegacin
No se deben tener ms de cuatro niveles de profundidad.
La navegacin debe ser como el sistema de carreteras. Todos los caminos tienen nombre y estn ubicados en un lugar adecuado.

Diseo de navegacin
El nombre debe ser prominente y hacer referencia a lo que se hizo clic.
Las pestaas son buena opcin de navegacin (amazon). Se debe hacer nfasis en el diseo de la pgina principal.

Diseo de la pgina principal

Identidad y misin del sitio. Jerarqua del sitio. Bsqueda. Sugerencias. Contenido temporal Transacciones Accesos directos Registro

Diferentes tipos de usuario

Cada usuario tiene una visin diferente de los sitios Web: Presidente ejecutivo, desarrollador, diseador, desarrollo comercial.
Cualquier diseo debe probarse antes de utilizarse. Es mejor realizar pruebas frecuentes que pruebas hasta el final.

Caractersticas 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 anlisis de los resultados obtenidos.
Algunos ejemplos: los usuarios no saben lo que quieren, las palabras que buscan no estn, las cosas estn ms 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 informacin. El 65% de la poblacin presenta algn tipo de discapacidad.

Accesibilidad
Aada texto alternativo a todas las imgenes
Hacer que todo contenido sea accesible desde teclado. No utilizar Javascript sin una buena razn.

Accesibilidad
No se deben pedir muchos datos.
No aadir adornos a los sitios. Se debe hacer un anlisis de cmo las personas compran.

La Web no se diseo para imprimirse

No hay un tamao fijo de la pgina

Los usuarios pueden cambiar el tamao de las fuentes.

Los usuarios pueden utilizar su propia hoja de estilo en cascada. El tamao de la pantalla puede ser muy pequeo o grande

Consideraciones
El tiempo de espera de una pgina no debe ser mayor a 8 segundos (+/- 2).
Es vital reducir el tamao del cdigo fuente dado que implica mayor latencia. Reduciendo blancos se puede optimizar el tamao de una pgina.

Consideraciones
Se debe reducir la dependencia a archivos externos como imgenes y otros recursos.
Los comentarios se pueden reducir en la versin final optimizando el cdigo. Existen herramientas llamadas crunch que ayudan a a eliminar los excesos de cdigos.

Crunches de Javascript
ECMAScript Cruncher
Javascript Crunchinator JSCruncher La ofuscacin de cdigo Web puede ayudar a disminuir hasta el 65% el tamao de un sitio Web.

Dynamic Code Ofuscation (DCO)

La ofuscacin de cdigo dinmico no es algo relativamente nuevo, pero ha despertado inters por el auge de lenguajes interpretados sobre la Web: HTML, XML, Javascript, etc. La ofuscacin es un ejemplo de refactorizacin.

DCO
La ofuscacin consiste en la ocultacin de cdigo para proteger de posibles pirateos
La refactorizacin es la transformacin de un programa internamente, sin afectar la funcionalidad externa. Algunos ofuscadores de Javascript se encuentra Blue Clam.

Ofuscacin
La ofuscacin consiste en confundir, por lo que se comprime el cdigo en menos lneas, se cambian nombres de variables y el flujo de control.
Aun ofuscando el cdigo, 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 programacin Web, Instituto Tecnolgico 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 edicin, Pearson Prentice Hall, Mxico. Wilson, P. (2004), Beginning JavaScript, 2nd Edition. Wiley Publishing, 2004. ISBN: 0-7645-5587-1.

Referencias
Compiladores (2006). Principios Tcnicas 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/a-webmasters-19commandments/

Referencias
J. Raskin (2001), Diseo de sistemas interactivos, Addison-Wesley, Mxico, 2001, ISBN: 970-26-0038-3, pp. 272. D. Ferguson, (2001) ASP sin errores, McGraw-Hill, Espaa, 2001, ISBN: 84-481-3182-7.
CSS, un juego de nios, (2007) PC Cuadernos, Espaa, ISBN: 2-915605-62-9.

Referenicas
S. Krug (2006), No me hagas pensar, segunda edicin, Pearson Prentice Hall, Espaa, 2006, ISBN: 84-8322-2868, pp. 210.
A. King (2003), Optimizacin de Sitios Web. Un Detallado Anlisis sobre la Reduccin de los Tiempos de Descarga, Anaya Multimedia, Espaa, 2003, ISBN: 84-415-1579-4.

Introduccin
Bases de datos espaciales Concepto de SIG Componentes Ventajas de los SIG Naturaleza de los datos espaciales Historia

Bases de Datos Avanzado