Implementación y administración de sitios web 2013 Prof. Christian Puch Correo: cmprchile@gmail.com
Implementación y administración de sitios web 2013 Historia Internet Video
Implementación y administración de sitios web 2013 2. WWW – Word Wide WEB Video
Implementación y administración de sitios web 2013 3. Protocolo HTTP Hyper Text Transfer Protocol Video
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language Video
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language Ejemplo en Clases
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language Tags Básicos Nuevo párrafo (dos espacios) <P> Línea horizontal <HR> Salto de línea (un espacio) <BR> Tamaño de la fuente <Hx> </Hx>. Donde x es un número entre 1 y 6, siendo 1 el tamaño mas grande y 6 el más pequeño
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language Tags Básicos Lista numerada: Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura : <OL> <LI> Primer párrafo u objeto. <LI> Segundo párrafo u objeto. Etc... </OL> Útiles para crear tablas de posiciones y enumerar procedimientos. Lista con viñetas: Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la siguiente estructura : <UL> <LI> Primer párrafo u objeto. <LI> Segundo párrafo u objeto. Etc... </UL>
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language Tags Básicos VÍNCULOS DE HYPERTEXTO <A HREF="URL">Texto del vínculo</A>
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language 4.1 Evolución Ejercicio:
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language 4.1 Evolución 1990 – HTML 1.o 1993 – HTML 2.0 1995 – HTML 3.0 nuevas capacidades, tales como facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos. Aunque se diseñó para ser compatible con HTML 2.0, era demasiado complejo para ser implementado con la tecnología de la época y, cuando el borrador del estándar expiró en septiembre de 1995, se abandonó debido a la carencia de apoyos de los fabricantes de navegadores web.
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language 4.1 Evolución 1997 – HTML 4.o Desarrolla el lenguaje HTML con mecanismos para hojas de estilo, ejecución de scripts, marcos, objetos incluidos, soporte mejorado para texto de derecha a izquierda y direcciones mezcladas, tablas más ricas y mejoras en formularios, ofreciendo mejoras de accesibilidad para personas con discapacidades. 1999 - HTML 4.01 El HTML 4.01 es una revisión de HTML 4.0 que corrige errores e introduce algunos cambios desde la revisión anterior.
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language 4.1 Evolución 1999 - HTML 4.01 Ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> EJEMPLO 1 </title> </head> <body> <h1>Encabezado</h1> <p> esto es un ejemplo de html</p> </body> </html>
Implementación y administración de sitios web 2013 4. HTML – HyperText Markup Language 4.1 Evolución 2006 – HTML 5.o es la quinta revisión importante del lenguaje básico de la World Wide Web Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas. Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que trae HTML5.
Implementación y administración de sitios web 2013 HTML5 establece una serie de nuevos elementos y atributos, como los elementos <audio> y <video>. Mejoras en el elemento <canvas>, capaz de renderizar en algunos navegadores elementos 3D. Algunos elementos de HTML 4.01 han quedado obsoletos, como <font> y <center>, cuyos efectos son manejados por el CSS. También hay un renovado énfasis en la importancia del scripting DOM para el comportamiento de la web. Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.
Implementación y administración de sitios web 2013 Ejemplo: <!DOCTYPE HTML> <html> <head> <title>fuente de múltiples elementos</title> </head> <body> <audio id="audioTestElem" autobuffer controls > <source src="test.m4a"> <source src="test.ogg" type="audio/ogg; codecs=vorbis"> <source src="url"> no audio for you </audio> </body> </html>
Implementación y administración de sitios web 2013 5. CSS - Cascading Style Sheets Video
Implementación y administración de sitios web 2013 5. CSS El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
Implementación y administración de sitios web 2013 5. CSS Evolución 1996 – CSS1 1998 – CSS2 2011 – CSS3
Implementación y administración de sitios web 2013 5. CSS Ventajas Algunas ventajas de utilizar CSS son: Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo. Separación del contenido de la presentación, lo que facilita al creador, diseñador, usuario o dispositivo electrónico que muestre la página, la modificación de la visualización del documento sin alterar el contenido del mismo, sólo modificando algunos parámetros del CSS. Optimización del ancho de banda de la conexión, pues pueden definirse los mismos estilos para muchos elementos con un sólo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos.
Implementación y administración de sitios web 2013 5. CSS Ejemplo <html> <head> <style type="text/css"> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> </body> </html>