Programación Web Interactiva

Presentación del tema: "Programación Web Interactiva"— Transcripción de la presentación:

1 Programación Web Interactiva
Luis Zarza

2 Temario

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

4 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

5 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

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

7 Conceptos básicos

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

9 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

10 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

11 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

12 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

13 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

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

15 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

16 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

17 Conceptos básicos HTTP

18 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

19 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

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

21 Conceptos básicos Formas de URL, basados en HTTP
http// /z/home.html pato.html aves/pato.html aves

22 Conceptos básicos Otras formas de URL ftp://ftp.utm.mx
news:comp.sys.mac gopher://gopher.utm.mx

23 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

24 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

25 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

26 HTML

27 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">

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

29 HTML: páginas básicas Versión, marca global, encabezado y cuerpo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head>contenido del encabezado</head> <body>contenido del cuerpo</body> </html> Encabezado <title>nombre_ventana</title>

30 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

31 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

32 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">

33 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

34 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

35 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=" <a href="

36 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">

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

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

39 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">

40 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

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

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

43 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

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

45 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">

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

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

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

49 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

50 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

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

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

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

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

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

56 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

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

58 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= </head>

59

60

61