elemento 1 evolucion de paginas web y html

37
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

Upload: betto-davila

Post on 09-Aug-2015

50 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Elemento 1 evolucion de paginas web y html

Cristhian TamamiSéptimo Semestre

Abril-Septiembre 2015

EVOLUCIÓN DEL DESARROLLO WEB

Y LA PROGRAMACIÓN

HTMLSISTEMAS

OPERATIVOS

TUTOR:

Ing. Javier Sánchez

Page 2: Elemento 1 evolucion de paginas web y html

LA EVOLUCIONLa 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.

Page 3: Elemento 1 evolucion de paginas web y html
Page 4: Elemento 1 evolucion de paginas web y html

WEB 1,0Etapa 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

Page 5: Elemento 1 evolucion de paginas web y html

WEB 1,0

Protocolos de esta etapa.

HTML HTTP

Page 6: Elemento 1 evolucion de paginas web y html

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.

Page 7: Elemento 1 evolucion de paginas web y html
Page 8: Elemento 1 evolucion de paginas web y html

WEB 2,0Una 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.

Page 9: Elemento 1 evolucion de paginas web y html

WEB 2,0

Page 10: Elemento 1 evolucion de paginas web y html
Page 11: Elemento 1 evolucion de paginas web y html

WEB 1,0 - 2,0

Page 12: Elemento 1 evolucion de paginas web y html

WEB 1,0 - 2,0WEB 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 multimediaSe 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.

Page 13: Elemento 1 evolucion de paginas web y html

WEB 3,0La 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.

Page 14: Elemento 1 evolucion de paginas web y html

WEB 3,0Web 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.

Page 15: Elemento 1 evolucion de paginas web y html

WEB 3,0Tecnologí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.

Page 16: Elemento 1 evolucion de paginas web y html

WEB 3,0Caracteristicas 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.

Page 17: Elemento 1 evolucion de paginas web y html
Page 18: Elemento 1 evolucion de paginas web y html

WEB 3,0

Page 19: Elemento 1 evolucion de paginas web y html

WEB 4,0Hacia 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.

Page 20: Elemento 1 evolucion de paginas web y html

WEB 4,0Web 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

Page 21: Elemento 1 evolucion de paginas web y html
Page 22: Elemento 1 evolucion de paginas web y html
Page 23: Elemento 1 evolucion de paginas web y html

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.

Page 24: Elemento 1 evolucion de paginas web y html

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.

Page 25: Elemento 1 evolucion de paginas web y html

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:

Page 26: Elemento 1 evolucion de paginas web y html

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>

Page 27: Elemento 1 evolucion de paginas web y html

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 principalTitulo secundarioTitulo terciarioTitulo cuarto nivelTitulo quintoTitulo sexto

Page 28: Elemento 1 evolucion de paginas web y html

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>

Page 29: Elemento 1 evolucion de paginas web y html

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.

Page 30: Elemento 1 evolucion de paginas web y html

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

Page 31: Elemento 1 evolucion de paginas web y html

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

Page 32: Elemento 1 evolucion de paginas web y html

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>

Page 33: Elemento 1 evolucion de paginas web y html

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

Page 34: Elemento 1 evolucion de paginas web y html

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.

Page 35: Elemento 1 evolucion de paginas web y html

GLOSARIOHTML

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.

Page 36: Elemento 1 evolucion de paginas web y html

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

Page 37: Elemento 1 evolucion de paginas web y html

BIBLIOGRAFIAREFERENCIAS

MISAT, Javier, 2012, La evolución de la webhttp://rodrigomisat.com/evolucion-web/

http://anamsh13.blogspot.com/2010/10/web-is-logarithmic-curve-it-keeps.html

CALDERON BLANCO, Marcos, 2012,web 3, web semántica.http://web30websemantica.comuf.com/