Programación Web Interactiva Luis Zarza. Temario.

Presentación del tema: "Programación Web Interactiva Luis Zarza. Temario."— Transcripción de la presentación:

1 Programación Web Interactiva Luis Zarza

2 Temario

3 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 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 servidor dominio directorio archivo 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 contenido Puntuales Puntuales tipo XHTML Con argumentos contenido

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

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 "> contenido del encabezado contenido del cuerpo Encabezado nombre_ventana

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

31 HTML: páginas básicas Separadores y formato básico Separador Salto de línea Negritas Cursivo Centrado Línea siguiente linea Negritas Cursivo Centrado

32 HTML: páginas básicas ¡Es preferible usar CSS! Colores y fondo

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 Listas Numeradas primer elemento segundo elemento No numeradas primer elemento segundo elemento 1. primer elemento 2. segundo elemento primer elemento segundo elemento

35 HTML: páginas ligadas Mismo documento mensaje liga Mismo servidor mensaje liga Diferente servidor

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 Video: avi, mov y qt

37 HTML: botones

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

39 HTML: páginas con diferentes medios Sonidos en la misma página (¿obsoleto?) Explorer: Firefox:

40 HTML: tablas Tablas: permiten la definición de estructuras rectangulares uno dos tres cuatro unodos trescuatro

41 HTML: tablas, colspan uno tres cuatro uno trescuatro

42 HTML: tablas, rowspan uno dos cuatro unodos cuatro

43 HTML: tablas, encabezados uno dos tres cuatro unodos trescuatro

44 HTML: tablas, bordes y espacios ¡Usar CSS! cellpadding="10" cellspacing="10" unodos trescuatro unodos trescuatro

45 HTML: tablas, textos y alineación ¡Usar CSS! Hola, que tal

46 HTML: tablas anidadas uno dos tres uno dos tres cuatro unodos tresunodos trescuatro

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

48 HTML: tablas con encabezados Titulo uno dos tres cuatro

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 Titulo Tu navegador no despliega frames

53 HTML: frames Titulo <frame scrolling="auto" src="cabeza.html" name="mensajes" noresize>

54 HTML: frames anidados

55 HTML: frames destino Se puedes especificar un frame como destino Mensaje de Bienvenida

56 HTML: frames destino Existen varios destinos reservados: _blank 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 A continuación, un iframe:

58 HTML: actualización automática Permite la actualización de una página o redireccionar después de un tiempo

59

60

61