Programación Web Interactiva Luis Zarza

Temario

Temario 1. Conceptos básicos Historia HTTP, HTML, URL Servidor, página, archivo, hipertexto, hipermedia

Temario (cont.) 2. HTML Páginas básicas Páginas ligadas Páginas con diferentes medios Tablas Frames Actualización automática de páginas

Temario (cont.) 3. Hoja de estilos en cascada CSS Definición interna de estilos Definición externa de estilos Precedencia Actualización general de estilos

Temario (cont.) 4. JavaScript 5. PHP 7. AJAX 8. JSON

Conceptos básicos

Conceptos básicos Historia HTML HTTP URL Servidor Página Hipertexto Hipermedia

Historia de HTML, finales de los 60’s Muchos sistemas de IBM eran incompatibles entre sí Lenguajes de control Representaciones (formatos de archivo) IBM encarga a Charles Goldfarb crear un sistema para documentos legales Almacenamiento Búsqueda Gestión Edición

Historia de HTML (cont.) Charles Goldfarb, Ed Mosher y Ray Lorie Los programas debían soportar representación genérica de documentos El formato común, específico de documentos legales Los documentos deben seguir algunas normas, para que las computadoras trabajen en forma fiable

Historia de HTML (cont. ) 1969: Surgió el Lenguaje de Marcado Generalizado GML 1974: Analizador de validación, para leer la definición de un tipo de documento 1986: Lenguaje Estandarizado y Generalizado de Marcado SGML Estándar ISO 8879

Historia de HTML (cont.) 1989: Tim Berners-Lee propone compartir información en CERN utilizando hipertexto Anders Berglund, usuario de SGML, propuso adoptar una sintaxis semejante Desarrollaron el Lenguaje de Marcado de Hipertexto HTML a partir de la norma SGML El sistema propuesto fue denominado World Wide Web Heredó algunas virtudes de SGML: Es muy general Fácil de editar

Historia de HTML (cont.) Es diferente de SGML en que: Utiliza una serie fija de tipos de elemento No es extensible, no puede adecuarse a ciertos tipos de documento No ha acabado de definirse desde su invención Cuando HTML dispuso de una DTD formal, ya habían millones de páginas con HTML erróneo

Historia de HTML (cont.) El tipo fijo de documento incomoda a muchas personas Surgieron extensiones incompatibles del lenguaje

Historia de HTML (cont.) Tim Berners-Lee: Consorcio de la Web Mundial Hojas de estilo en cascada CSS Posibilidad de añadir abstracciones arbitrarias a HTML Nueva subserie de SGML: Lenguaje de Marcado extendido XML Principales ventajas de SGML Sencillez de la Web XHTML: HTML definido en términos de XML

Conceptos básicos HTTP Protocolo simple de transferencia de documentos e információn del Web Se realiza la conexión El cliente solicita un documento Nombre Directorio El servidor localiza el documento y lo envía al cliente Se cierra la comunicación

Conceptos básicos HTTP

Conceptos básicos HTML Lenguaje de descripción de documento hipertexto Permite la definición de ligas que conducen a otros documentos Locales Remotos Permite la inclusión de elementos de formato y multimedia

Conceptos básicos Localizador Universal de Recursos URL Los documentos en el Web son recursos Páginas Imágenes Sonidos Pueden estar en diferentes: Directorios Computadoras Redes locales Dominios Países El URL establece una referencia completa

Conceptos básicos URL http://www.utm.mx/z/home.html protocolo directorio servidor archivo dominio extensión

Conceptos básicos Formas de URL, basados en HTTP http://www.utm.mx/z/index.html http://www/z/home.html http://www.utm.mx/z http//www.utm.mx/~zarza/home.html /z/home.html pato.html aves/pato.html aves

Conceptos básicos Otras formas de URL ftp://ftp.utm.mx mailto:zarza@mixteco.utm.mx news:comp.sys.mac gopher://gopher.utm.mx

Conceptos básicos Servidor de Web Programa que corre en una computadora conectada en la red que soporta el protocolo HTTP para entregar páginas a los clientes Prácticamente cualquier computadora que se pueda conectar a la red puede contener un servidor

Conceptos básicos Página Archivo escrito en HTML para presentar información Puede contener ligas a otras páginas, o en general, a cualquier URL Puede ser ubicado en un servido, y tener un URL asociado para ser referenciado desde cualquier parte de la Internet

Conceptos básicos Hipertexto Hipermedia=hipertexto+multimedia Sistema contenedor de documentos de texto que incluyen referencias que conducen a otros textos relacionados con el texto indicado en la referencia Hipermedia=hipertexto+multimedia Sistema hipertexto con soporte a diversos medios, como imágenes, video, animaciones y sonidos

HTML

HTML: páginas básicas Marcas Delimitadoras Puntuales <nombre_marca>contenido</nombre_marca> Puntuales <nombre_marca> Puntuales tipo XHTML <nombre_marca/> Con argumentos <nombre_marca dato="valor"> contenido </nombre_marca">

HTML: páginas básicas Páginas bien formadas No se traslapan <b><em>texto</b>con formato</em> Las marcas están completas <nombre_marca>contenido</nombre_marca> Hay una marca global <html>todo el contenido</html> Todo contenido pertenece a alguna marca que lo define <p>Texto</p>

HTML: páginas básicas Versión, marca global, encabezado y cuerpo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>contenido del encabezado</head> <body>contenido del cuerpo</body> </html> Encabezado <title>nombre_ventana</title>

HTML: páginas básicas Titulo principal Párrafos y jerarquía de títulos <h1>Título principal</h1> <p>Texto introductorio</p> <h2>Primer tema</h2> <p>Texto sobre el primer tema</p> <h2>Segundo tema</h2> <p>Texto sobre el segundo tema</p> Titulo principal Texto introductorio Primer tema Texto sobre el primer tema Segundo tema Texto sobre el segundo tema

HTML: páginas básicas Negritas Línea siguiente linea Cursivo Centrado Separadores y formato básico Separador <hr> Salto de línea <br> Negritas <b></b> Cursivo <em></em> Centrado <center></center> Línea siguiente linea Negritas Cursivo Centrado

HTML: páginas básicas ¡Es preferible usar CSS! Colores y fondo <body background="url de imagen" bgcolor="color" text="color" link="color" vlink="color" alink="color">

HTML: páginas básicas Código de color Por nombre black white Blue Por valor (hexadecimal) #rrggbb Cada valor va desde 00 hasta ff

HTML: páginas básicas 1. primer elemento 2. segundo elemento Listas Numeradas <ol> <li>primer elemento</li> <li>segundo elemento</li> </ol> No numeradas <ul> <li>primer elemento</li> <li>segundo elemento</li> </ul> 1. primer elemento 2. segundo elemento primer elemento segundo elemento

HTML: páginas ligadas Mismo documento Mismo servidor <a name="pato"></a> <a href="#pato">mensaje liga</a> Mismo servidor <a href="otro.html">mensaje liga</a> <a href="directorio/otro.html">mensaje liga</a> Diferente servidor <a href="http://www.utm.mx/aves/pato.html"> <a href="http://www.utm.mx/aves/pato.html#cuac">

HTML: páginas con diferentes medios Imágenes: gif, jpg y png (y svg) <img src="url de imagen" alt="texto alterno"> Sonidos: wav, ra y mp3 <a href="sonido.wav"> Video: avi, mov y qt <a href="video1.avi">

HTML: botones <a href="url"><img src="foto.jpg"></a>

HTML: mapas (¿obsoleto?) <img src="url de imagen" usemap="#mapa" border="0"> <map name="mapa"> <area shape="rect" coords="10,10,20,20" href="url_destino" alt="texto alterno"> </map>

HTML: páginas con diferentes medios Sonidos en la misma página (¿obsoleto?) Explorer: <bgsound src="cancion.wav" loop="true"> Firefox: <embed src="cancion.wav" width=146 height=55 autostart="true" loop="true" hidden="true">

HTML: tablas Tablas: permiten la definición de estructuras rectangulares <table border="1"> <tr> <td>uno</td><td>dos</td> </tr> <td>tres</td><td>cuatro</td> </table> uno dos tres cuatro

HTML: tablas, colspan <table border="1"> <tr> <td colspan="2">uno</td> </tr> <td>tres</td><td>cuatro</td> </table> uno tres cuatro

HTML: tablas, rowspan <table border="1"> <tr> <td rowspan="2">uno</td><td>dos</td> </tr> <td>cuatro</td> </table> uno dos cuatro

HTML: tablas, encabezados <table border="1"> <tr> <th>uno</th><th>dos</th> </tr> <td>tres</td><td>cuatro</td> </table> uno dos tres cuatro

HTML: tablas, bordes y espacios ¡Usar CSS! <table> <table border="4"> cellpadding="10" cellspacing="10" uno dos tres cuatro uno dos tres cuatro

HTML: tablas, textos y alineación ¡Usar CSS! <td>Hola,<br>que tal</td> <tr align="center"> <td align="right"> <td valign="top"> <td valign="middle"> <td valign="bottom">

HTML: tablas anidadas uno dos tres cuatro <table border="1"> <td>uno</td><td>dos</td> </tr> <td>tres</td> <td> <tr><td>uno</td><td>dos</td></tr> <tr><td>tres</td><td>cuatro</td></tr> </table> </td>

HTML: tablas con ancho fijo <table border="1" width="50%"> <table border="1" width="200"> <td width="80%">

HTML: tablas con encabezados <table border="1"> <caption align="top">Titulo</caption> <tr> <td>uno</td><td>dos</td> </tr> <td>tres</td><td>cuatro</td> </table>

HTML: tablas con bordes frame= void: Sin lados (default) above: Lado superior below: Lado inferior. hsides: Lados superior e inferior vsides: Lados derecho e izquierdo lhs: A mano izquierda únicamente rhs: A mano derecha únicamente box: Los cuatro lados externos border: Los cuatro lados externos

HTML: tablas con reglas rules= none: Sin reglas (default) rows: Las reglas aparecerán entre los renglones cols: Las reglas aparecerán entre las columnas all: Las reglas aparecerán entre las columnas y los renglones

HTML: frames Múltiples páginas en una ventana Control de despliegue Contenido dinámico Información estructurada

HTML: frames Página descriptora de contenido <html> <head><title>Titulo</title></head> <frameset rows="80,20"> <frame src="cabeza.html"> <frame src="cuerpo.html"> <noframes> <p>Tu navegador no despliega frames</p></noframes> </frameset> </html>

HTML: frames <head><title>Titulo</title> <frameset rows="100,*" border="0"> <frame scrolling="auto" src="cabeza.html" name="mensajes" noresize> <frame scrolling="yes" src="cuerpo.html"> </frameset>

HTML: frames anidados <frameset cols="100,*"> <frame src="menu.html"> <frameset rows="80,20"> <frame src="cabeza.html"> <frame src="cuerpo.html"> </frameset>

HTML: frames destino Se puedes especificar un frame como destino <a href="bienvenida.html" target="mensaje"> Mensaje de Bienvenida </a>

HTML: frames destino Existen varios destinos reservados: _blank _self Enviar a una ventana nueva _self Enviar al mismo frame donde se encuentra la liga _parent Enviar a la ventana padre, es decir, a donde se encuentra el frameset que define al frame donde se encuentra la liga _top Enviar a la ventana principal

HTML: frames en línea <p>A continuación, un iframe:</p> <iframe src="iframe.html" width="200" height="400" scrolling="auto" frameborder="1">

HTML: actualización automática Permite la actualización de una página o redireccionar después de un tiempo <head> <meta http-equiv="Refresh" content="15; URL=http://www.utm.mx"> </head>