1 / 61

Programación Web Interactiva

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

chiko
Télécharger la présentation

Programación Web Interactiva

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related