Este documento describe la evolución del desarrollo web y el lenguaje de programación HTML a través de las diferentes etapas de la Web 1.0, 2.0, 3.0 y 4.0. Explica las características clave de cada etapa y las tecnologías asociadas como HTML, HTTP, blogs, redes sociales, contenido generado por el usuario y semántica web. También proporciona ejemplos de etiquetas HTML comunes para crear páginas web básicas.

1. Cristhian Tamami
Séptimo Semestre
Abril-Septiembre 2015
EVOLUCIÓN DEL
DESARROLLO WEB Y
LA PROGRAMACIÓN
HTML SISTEMAS
OPERATIVOS
TUTOR:
Ing. Javier Sánchez

2. LA EVOLUCION
La web a tenido un constante cambio en los últimos años hemos
evolucionado de una web totalmente estática a una web
totalmente dinámica y social.

4. WEB 1,0
Etapa de la web en la que el contenido compartido era mostrado al
usuario de una forma muy básica y con poco dinamismo , además
en esta etapa de la web los sitios web no se actualizaban
constantemente , no existían servicios como los blogs o las redes
sociales.
Un sitio web en esta etapa se conformaba de :
Contenido mostrado en tablas
Uso de imágenes gif
Se usaba mucho los frameset o marcos
Formulario de contacto , en el cual se enviaban los mensajes por
medio de una aplicación cliente.
Contenido mostrado al usuario con un colorido básico

5. WEB 1,0
 Protocolos de esta etapa.
HTML HTTP

6. WEB 1,0
 Pocos productores de contenidos.
 Muchos lectores de estos contenidos.
 paginas estáticas.
 Sitios direccionales y no colaborativos
 Los usuarios eran lectores consumidores
 La actualización de los sitios no se realiza en forma
 periódica.

8. WEB 2,0
Una web mas dinámica en el que el usuario dejaba de ser
consumidor para convertirse en generador de contenidos , la web 2.0
inicia alrededor del año 2003 algunas características destacables de
la web 2.0 son :
Interactividad : Se hace posible la comunicación total , tanto
direccional como bidireccional y multidireccional.
Aprendizaje colaborativo : Al ser participativo permite el intercambio
de ideas y conceptos propiciando el trabajo en grupo.
Multidireccional dad : Al existir facilidad para que documentos
opiniones y respuestas tengan diferentes y múltiples destinatarios ,
seleccionados a golpes de clic .
Libertad de edición y difusión : Gran facilidad de edición de blogs ,
webs, wikis , permitiendo la participación de varias personas para
conformación de un contenido.

9. WEB 2,0

11. WEB 1,0 - 2,0

12. WEB 1,0 - 2,0
WEB 1.0 VS WEB 2.0
WEB 1.0 WEB 2.0
Sitios web mas poco dinámicos Sitios web totalmente dinámicos
Contenidos sin actualizacion constante Contenidos con cambios frecuentes
Web poco participativa , era usada mas
para leer noticias o textos poco
actualizados.
Web con participación por medio de chat,
comentarios etc.
Software de licencia pagada Software de uso libre
Sitios web dedicado a comercio Sitios web con diferentes fines
Carencia de contenidos multimedia Se caracteriza por el contenido multimedia
Compartir contenido era solo para expertos
Todos pueden generar contenidos y
compartirlo
La tarea de mantenimiento era muy tediosa
, teniendo que modificar cada archivo de
la web.
La actualizacion de un sitio toma segundos
para ver el cambio en el sitio.

13. WEB 3,0
La Web 3.0 nace de La imaginación nos permite creer en páginas,
visibles desde los espejos de nuestros cuartos de baño, capaces de
recorrer la Web en busca de páginas de noticias y mostrarnos un
resumen de las noticias más importantes de cada una.
En definitiva, de eso trata la Web 3.0, de páginas capaces de
comunicarse con otras páginas mediante procesamiento de
lenguaje natura.
la Web 3.0 hacen referencia a la transformación de la Web en una
base de datos, un movimiento hacia la fabricación de contenido
accesible para múltiples buscadores, la influencia de la Inteligencia
Artificial, la Web Semántica o la Web geoespacial.
La Web 3.0 y sus servicios se fundamentan en el colectivo de la Web
Semántica , búsquedas de lenguaje natural, data-mining, aprendizaje
automático y asistencia de agentes, todo ello conocido como
técnicas de la Inteligencia Artificial o Inteligencia Web.

14. WEB 3,0
Web Semántica
La Web Semántica es la nueva generación de la Web, que intenta
realizar un filtrado automático preciso de la información. Para ello,
es necesario hacer que la información que reside en la Web sea
entendible por las propias máquinas. Especialmente su contenido,
más allá de su simple estructura sintáctica.
la Web Semántica también trata la forma en la cual se implementan
servicios web fiables e interoperables a gran escala, creando una
web de servicios interpretables e interoperables que agentes
inteligentes puedan descubrir, ejecutar y componer
automáticamente.

15. WEB 3,0
Tecnologías actuales en la Web 3.0
La Web 3D
3D se refiere al diseño tridimensional de las vistas virtuales de
cualquier objeto a partir de tres lados distintos simultáneamente.
Este tecnología se usa de manera masiva en juegos, en tours
mundiales virtuales, ingeniería geoespacial, investigación de alta
tecnología on-line, redes, desarrollo de software on-line,
telecomunicaciones on-line, compras on-line y redes sociales, todos
ellos ejemplos perfectos de la Web 3.0.
Web Penetrante
La Web penetrante se refiere a aquellas aplicaciones de la Web en
la amplia gama del área, en la cual la Web ha alcanzado no sólo
los ordenadores y teléfonos móviles, sino que también se encuentra
en la ropa, aplicaciones, y automóviles y mucho más, e.g. Web
situada en las ventanas de las casas que comprueba el tiempo y a
su vez controla el climatización y la apertura y cierre de las
persianas.

16. WEB 3,0
Caracteristicas de la Web 3.0
Aplicación Web con mucho AJAX.
Podrán trabajar todas juntas.
Serán relativamente pequeñas.
Gestionarán datos que estarán "en la nube".
Podrán ser ejecutadas en cualquier dispositivo (PC, teléfono móvil,
etc.).
Serán muy rápidas y muy personalizables.
la Web 3.0 será una revolución en Internet, no sólo será el futuro en lo
que a gestión de contenido se refiere, también aportará una nueva
forma de utilizar la Web, sacándola de los ordenados y los móviles y
llevándola a casi cualquier objeto cotidiano.

18. WEB 3,0

19. WEB 4,0
Hacia donde se quiere llegar
El desarrollo de la Web 3.0 y sus tecnologías llevarán hacia la Web
4.0, la Web Ubicua, donde el objetivo primordial será el de unir las
inteligencias donde tanto las personas como las cosas se
comuniquen entre sí para generar la toma de decisiones. Para el
2020 se espera que haya agentes en la Web que conozcan,
aprendan y razonen como lo hacemos las personas.
Parecería ciencia ficción, pero si alguien hubiera escrito hace tres o
cuatro años que estaríamos haciendo relaciones virtuales a través
de redes sociales, también hubiera parecido como ciencia ficción
entonces. Hoy estamos tratando de ver que habrá en unos años.
Habrá que estar atentos al desarrollo para el aprovechamiento de
estas nuevas características de la Web.

20. WEB 4,0
Web 4.0 Es el fenómeno en que la web es simbiótica, siempre y
utilizable por los seres humanos y las máquinas. Aplicaciones y
extensiones de dominar. Las computadoras de escritorio están siendo
reemplazadas por las netbooks y tabletas para facilitar el acceso. La
gente quiere hablar con la web. Es la era de la participación social
en línea.
Web 4.0 El tiempo ahora que el sistema operativo está en la nube y la
participación de la web una necesidad. Tenemos varias opciones
para obtener los datos: de escritorio, portátiles, libros de redes,
teléfonos móviles, tablets y iTV aún y todo esto es de vital importancia
para el sustento de todo lo que es WEB.
En esta era, veremos interfaces más potentes, como la inteligencia
ambiental, webOS y la inteligencia artificial. El futuro está en Web 4.0
donde el Internet está siempre encendido

23. Publicación de
la ISO 8879 que
presenta el
Standard
General Markup
Language,
origen del HTML.
Se presenta su artículo
Information Management: A
Proposal , dedicándose de lleno
al desarrollo de un sistema que
permitiera el acceso en línea de
manera uniforme a la
información.
Se crea el
nombre World
Wide Web
Se introduce el
primer visor de HTML
y apertura del primer
sitio con acceso
público de World
Wide Web
Se produce la primera
Definición de Tipo de
Documento primer
visor gráfico de Web
Primeros
artículos sobre
WWW en diarios
y revistas
Desarrolla un
servidor y clientes
con mayores
prestaciones
para HTML
Se comienza a compilar la
normativa del nuevo nivel
del lenguaje, el HTML 3.0
Se presentan las
nuevas versiones
de sus visores que
soportan gran
parte del nivel de
HTML 3.0.
Aparece
HTML 4.0.
Aparece la versión
normalizada del
3.2. En julio,
aparece la versión
4.0, experimental.

24.  Para crear una página web se pueden utilizar varios
programas especializados en esto, como por ejemplo, el
Microsoft Front Page o el Macromedia Dreamweaver 3.
Otra forma de diseñar un archivo .html, es copiar todo
en el Bloc de Notas del Windows, ya que este sencillo
programa cumple con un requisito mínimo que es la
posibilidad de trabajar con las etiquetas con las que
trabaja este lenguaje.
A continuación les mostraremos las etiquetas mas
comunes que deben aprenderse para hacer una
pagina Web.

25. Si se tiene en cuenta el contenido del documento, todos
los documentos de HTML bien escritos comparten una
estructura en común. Un documento de HTML empieza
con la etiqueta <HTML>, que es la que encerrará el
documento actual. Contiene dos secciones primordiales:
la cabecera y el cuerpo encerradas respectivamente por
los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera puede contener información y siempre
contiene el titulo del documento encerrado por el
elemento <TITLE>.
En el cuerpo se encuentra todo el contenido del
documento, ya sea, texto, imágenes, sonidos,
hipervínculos, etc.
Un documento escrito en HTML contiene las siguientes
etiquetas en el siguiente orden:

26.  Ejemplo de la estructura de un texto
HTML:
<HTML>
<HEAD>
<TITLE> Título de mi página de Internet
</TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina
</CENTER> </H1>
<HR>

27.  Para escribir títulos se usa la etiqueta <Hx></Hx> en donde
x es un número.
Ejemplo:
<h1>Titulo principal</h1>
<h2>Titulo secundario</h2>
<h3>Titulo terciario</h3>
<h4>Titulo cuarto nivel</h4>
<h5>Titulo quinto</h5>
<h6>Titulo sexto</h6>
 Quedaría mas o menos así:
Titulo principal
Titulo secundario
Titulo terciario
Titulo cuarto nivel
Titulo quinto
Titulo sexto

28.  Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a
que si uno escribe algo, por mucho espacio que uno le de siempre al texto,
siempre va a aparecer en la misma línea.
Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado
dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes:
<p align="left"> Párrafo... </p> Alinea a la izquierda.
<p align="center"> Párrafo... </p> Realiza un centrado.
<p align="right"> Párrafo... </p> Alinea a la derecha.
Cuando nosotros queremos que lo que escribimos aparezca en otra línea
utilizamos el comando <BR>.
Al terminar de escribir un párrafo es conveniente y estético utilizar el
comando para separar un párrafo de otro que es <HR>

29.  Etiquetas para darle formato al texto:
Para el tamaño y tipo de letra se usa la etiqueta <FONT> y
</FONT>, que posee tres atributos: tamaño (Size), Tipo de letra o
fuente (face) y color
 Formato:
<B> y </B> Sirve para colocar un texto en Negrita.
<U> y < /U> Sirve para subrayar un texto
<STRIKE> y </STRIKE> Sirve para tachar un texto.
<STRONG> y </STRONG> Cumple la misma función que <B>
<I> y <I> Para colocar un texto en cursiva.
<EM>texto con énfasis</EM> texto con énfasis
<CITE>citación</CITE> citación
<DFN>definición</DFN> definición
<KBD>teclado</KBD> teclado
<SAMP>ejemplo</SAMP> ejemplo
SIZE: Regula el tamaño de los caracteres.

30.  El color:
 En principio existen dos posibilidades para definir
los colores en HTML:
1. Mediante la especificación de los valores RGB
del color deseado en forma hexadecimal
(RGB=Red/Green/Blue, valores Rojo/Verde/Azul)
2. Mediante la especificación del nombre del
color en ingles

31.  A la hora de crear una página Web podemos
introducir gráficos de forma muy sencilla, sólo hay
que tener en cuenta que las imágenes deben
tener formato Gif o JPEG.
 La etiqueta utilizada para agregar imágenes a
una página Web es <IMG> y va acompañada de
un atributo fundamental "SCR", que indica la ruta
donde se encuentra el archivo que contiene la
imagen a insertar. Por ejemplo:
<IMG SRC="lugar donde guardo la imagen">

32.  Para poner la imagen en la izquierda
escribir:
<IMG ALIGN=LEFT SRC=" dragonball.gif ">
 A la derecha:
<IMG ALIGN=RIGHT SRC=" dragonball.gif">
 Y si se quiere poner la imagen en el
centro:
<P ALIGN=CENTER> <IMG SRC="
dragonball.gif"> </P>

33.  Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a
partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar
el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a
href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aquí
para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en
nuestro texto HTML:
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
 Que se vería de esta forma: Pulse aquí para visitar a la NASA
Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:
<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la
imagen.gif.
 También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer
es cambiar el texto por una imagen:
<a href="http://www.altavista.com"><img src="Logo.jpg"></a>
Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del
Logo.jpg (que podría ser el logo del Altavista) y se convierta en una "manito", al hacer clic
nos envíe al buscador Altavista.
Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente
manera:
<a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a>

34.  Sin HTML no existiría el Internet que hoy conocemos, si no se hubiera inventado,
seguiríamos con el aburrido FTP (Protocolo de Transferencia de Ficheros)
mandándonos o bajando archivos que a veces ni sabíamos lo que eran, sin tener la
posibilidad de visualizarlo antes. Ahora por medio de una página llena de colores y
botones por la cual se puede navegar, se puede tener acceso a bastante
información y archivos.
El lenguaje de HTML abrió una puerta al mundo permitiéndole a las personas
expresar sus ideas por medio de páginas y mostrárselas a todas las personas de
todos los países.
 Con el HTML se logró un gran movimiento económico ya que muchísimas empresas
publican, venden, y ofrecen sus productos, sus servicios y sus ofertas atrayendo a
mayor cantidad de personas. También gracias al HTML nacieron muchas empresas
que ofrecen diversos servicios como Yahoo, Altavista, HotMail, Terra, Yupi,
Mercadolibre, De Remate, etc.
Infinitas son las posibilidades que te brindan las páginas WEB ya que no solo te dan
la posibilidad de pasar el tiempo navegando, sino que también hasta se puede
comprar un auto por Internet, solo basta con llenar un formulario con los datos
personales y el número de tarjeta de crédito y en ocho días lo tenemos en nuestra
casa.
Todo el universo de Internet se lo debemos al HTML, ya que todas las páginas con
las que se compone la World Wide Web están hechas con el lenguaje de
programación HTML.

35. GLOSARIO
HTML
HTML, siglas de HyperText Markup Language («lenguaje de marcado
de hipertexto»)
HTTP
Hypertext Transfer Protocol o HTTP (en español protocolo de
transferencia de hipertexto)
La minería de datos o data-mining
El objetivo general del proceso de minería de datos consiste en
extraer información de un conjunto de datos y la transforman en una
estructura comprensible para su uso posterior.

36. AJAX
Es una técnica de desarrollo web para crear aplicaciones interactivas
o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el
cliente, es decir, en el navegador de los usuarios mientras se
mantiene la comunicación asíncrona con el servidor en segundo
plano. De esta forma es posible realizar cambios sobre las páginas sin
necesidad de recargarlas, lo que significa aumentar la interactividad,
velocidad y usabilidad en las aplicaciones.
GLOSARIO

37. BIBLIOGRAFIA
REFERENCIAS
MISAT, Javier, 2012, La evolución de la web
http://rodrigomisat.com/evolucion-web/
http://anamsh13.blogspot.com/2010/10/web-is-logarithmic-curve-it-keeps.h
CALDERON BLANCO, Marcos, 2012,web 3, web semántica.
http://web30websemantica.comuf.com/