Programación Web Interactiva Luis Zarza

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

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 protocolo servidor dominio directorio archivo extensión

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

Conceptos básicos Otras formas de URL ftp://ftp.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 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 contenido Puntuales Puntuales tipo XHTML Con argumentos contenido

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

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

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

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

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

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

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

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

HTML: botones

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

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

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

HTML: tablas, colspan uno tres cuatro uno trescuatro

HTML: tablas, rowspan uno dos cuatro unodos cuatro

HTML: tablas, encabezados uno dos tres cuatro unodos trescuatro

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

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

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

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

HTML: tablas con encabezados Titulo uno dos tres cuatro

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

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

HTML: frames anidados

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

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

HTML: frames en línea A continuación, un iframe:

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