Programación Web Interactiva

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://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

22. Conceptos básicos • Otras formas de URL • ftp://ftp.utm.mx • mailto:zarza@mixteco.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 • 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 <nombre_marca>contenido</nombre_marca> • Puntuales <nombre_marca> • Puntuales tipo XHTML <nombre_marca/> • Con argumentos <nombre_marca dato="valor"> <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" "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>

30. 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

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

32. HTML: páginas básicas • ¡Es preferible usar CSS! • Colores y fondo <bodybackground="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. 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 básicas

35. HTML: páginas ligadas • Mismo documento <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">

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: <bgsoundsrc="cancion.wav"loop="true"> • Firefox: <embedsrc="cancion.wav"width=146height=55autostart="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> <tr> <td>tres</td><td>cuatro</td> </tr> </table>

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

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

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

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

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 <table border="1"> <tr> <td>uno</td><td>dos</td> </tr> <tr> <td>tres</td> <td> <table border="1"> <tr><td>uno</td><td>dos</td></tr> <tr><td>tres</td><td>cuatro</td></tr> </table> </td> </tr> </table>

47. HTML: tablas con ancho fijo <tableborder="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> <tr> <td>tres</td><td>cuatro</td> </tr> </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