Creación de contenidos Web-HTML Redes: Análisis, Diseño e Implantación Dr. Carlos Arturo Vega Lebrún Creación de contenidos Web-HTML Por: Germain Rojas Oropeza Julio Cesar Valdez Ahuatzi
Web Web Del ingles: Telaraña, Red, Malla,… Referencia al World Wide Web (www) Sistema de distribución de información basado en hipertexto y accesible a través de internet Diseñada en 1989 por Tim Berners-Lee en el CERN (Centro Europeo de Investigación Nuclear) Éxito: Usa el protocolo http y el lenguaje HTML Acceso: Navegador Web Emplea una arquitectura Cliente/servidor Se necesita un servidor Web (Apache) Web
Browser Sitio Web IE, Mozilla Firefox, Safari Permite acceder a sitios Web Browser Colección de paginas web relacionadas y comunes a un dominio de internet Permite acceder a enlaces web Usa URL (Localizador Universal de recursos) http://www.google.com Sitio Web
Contenidos Web Lenguajes de programación. Diversos contenidos. HTML (Hypertext Mark-up Language ). PHP (PHP Hypertext Pre-processor ). Javascripts. Actions Scripts (Flash) Diversos contenidos. Imágenes Animaciones Flash Videos Texto Enlaces
Página Web Web’s Web 3.0 (semántica) Maneja Hipertexto Se construyen con código HTML Tienen: texto, imágenes, animaciones, video y/o sonido Documento HTML/XHTML accesible por el protocolo HTTP Página Web Web 1.0 (De solo lectura) Web 2.0 (Dinámica, Servicios web, Redes Sociales, Blogs, wikis, ..) Web 3.0 (semántica) Web’s
Diferencias Web 1.0 y 2.0: Web 1.0 Web 2.0 Información poco actualizada. Contenidos y sitios estáticos Usuarios consumidores o lectores. Webs creadas por solo webmasters. Web 1.0 Información en permanente cambio. Contenidos y sitios flexibles en constante transformación Usuarios productores de contenido Webs colaborativas. Web 2.0
Evolución de la Web 1.0 -2.0
Servicios Web
http:// HyperText Transfer Protocol Desarrollado por WWW Consortium y la Internet Engineering Task Force (Grupo Especial sobre Ingeniería de Internet). HyperText Transfer Protocol HTTP trabaja bajo el puerto 80. Emplea directivas como GET, POST, HEAD, …… http://
HTML HTML HyperText Mark-up Language Lenguaje de marcas o etiquetas (tags) Se usa para construir páginas web Documentos texto plano Se usan etiquetas de inicio <etiqueta> Se usan etiquetas de final </etiqueta> Otros lenguajes: PHP, Action Scrip HTML
HTML Lenguaje basado a Marcas y Etiquetas Usado para crear paginas web Ubicado en Capa de Aplicación en Modelo OSI. Usado para crear paginas web Versiones de HTML: 1.0, 2.0, 3.2, 4.0. Comúnmente texto plano. Utiliza etiquetas de inicio y final. <etiqueta> </etiqueta>
Ejemplos de etiquetas: <title> nombre del documento </title> <P> etiqueta del marcado de texto </P> <B>Texto en Negritas</B> <A HREF = “http://www.w3c.org”> consorcio </A> <IMG SRC=”nombre_imagen.jpg” BORDER=0 ALT=”Nombre”>
Estructura básica de un documento HTML: <HEAD> <TITLE> Título del documento </TITLE> </HEAD> <BODY> Texto del documento </BODY> </HTML>
Estructura básica de un documento HTML: <HEAD> <TITLE>Título de la pagina</TITLE> </HEAD> <BODY> <UL> <LI>Primer elemento <LI>Segundo elemento <LI>Tercer elemento </UL> <P> Juego de caracteres de 7 bits. Sólo permite 127 caracteres. </P> </BODY> </HTML>
PHP Paginas web dinámicas. El servidor ejecuta el interprete PHP. Versiones 3,4,5,6 Trabaja por módulos. CSS Hojas de Estilo en cascada. Estructuración de HTML. Permite a los usuarios especificar su propia hoja de estilos.
Creación de animaciones. Javascripts Crea acciones en paginas web. Visualización sin programas externos. Localizado por:<script></script>. Interacción en páginas web. FLASH Creación de animaciones. Action Script (programación orientada a objetos). Extensión SWF.
Ejemplo Practico
Gracias