ponencia unidad no. 1 introducciÓn a la web

Unidad Curricular:

Introducción a la Web

Introducción a la

Web

INSTITUTO SUPERIOR TECNOLOGICO TENA

Instituto Técnico Superior Tena

Se concede permiso

documento bajo los

License, Version 1.1

para copiar, distribuir y / o modificar este

términos de la GNU Free Documentation

o cualquier versión posterior publicada por

la Free Software Foundation, siempre que su autor original tenga

conocimiento.


Unidad I Introducción al Diseño Web

3

Al finalizar esta unidad el estudiante:

Conoce los conceptos sobre www, http, web,

sitio web e internet.

Identifica cada una de las generaciones de la

web

Distingue los tipos de sitios web.

PONENCIA



3

PONENCIA

Tiempo Programado:

1 y 2 semana



MENSAJE MOTIVACIONAL

“El fracaso es una gran oportunidad

para empezar otra vez con más

inteligencia.”



PONENCIA

UNIDAD I INTRODUCIÓN A LA WEB



PONENCIA TEMARIO



1. ORIGEN DE LA WEB

2. EVOLUCIÓN DE LA WEB

UNIDAD I

3. CONCEPTUALIZACIÓN 5. ANATOMIA Y ESTRUCTURA DE UN SITIO WEB

5. TIPOS DE PAGINAS WEB

4. NAVEGANDO POR LA WEB

PONENCIA Origen de la Web PONENCIA


La Web fue creada en 1989 por el inglés Tim Berners-Lee y el belga Robert Cailliau

mientras trabajaban en el CERN en Ginebra, Suiza.

Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de

estándares Web (lenguaje con los que se crean las páginas Web), en los últimos años ha

abogado por su visión de una Web Semántica, empezó a escribir un programa que le

permitiera almacenar información.

De modo magistral, dio forma y aplicación a un par de conceptos que ya habían sido

formulados de forma más o menos vaga y genérica: El hipervínculo, que conducía

directamente al concepto de hipertexto, de ahí al de páginas HTML (páginas Web) que a su

vez darían origen a un nuevo servicio de Internet (mejor diríamos una nueva forma de usar

la Red) que acabaría arrasando, y a un nuevo paradigma de arquitectura de la información:

Los "Hypermedia".




Las páginas de hipertexto, con sus hipervínculos enlazando información en cualquier parte

del mundo, tejen una telaraña mundial,"World Wide Web",abreviadamente "La Web«

;WWW o W3.

No confundir "la Web" con "la Red". La Red, es Internet y estaba inventada bastante

antes. La Web es uno de los muchos servicios que proporciona Internet. Además,

como la Web es, entre otras cosas, una "interfase" para utilizar la red (de tremendo

éxito), muchos de los servicios se han "maquillado de Web", adoptando formas compatibles

con los navegadores.




¿Qué es Internet?

• Incluye distintos servicios:

– Correo electrónico. 1971, Ray Tomlinson

– Chat (o IRC).1988, en Finlandia

– Transferencia de archivos

– Foros de discusión

– World Wide Web, 1989, Tim Berners Lee





¿Qué es Internet?

Uno de los servicios que más éxito ha tenido en Internet

ha sido la World Wide Web (WWW, o "la Web"), hasta

tal punto que es habitual la confusión entre ambos

términos.



¿Qué es Internet?

Internet es un conjunto descentralizado de redes de comunicación

interconectadas que utilizan la familia de protocolos TCP/IP, garantizando

que las redes físicas heterogéneas que la componen funcionen como una

red lógica única, de alcance mundial.

Sus orígenes se remontan a 1969, cuando se estableció la primera

conexión de computadoras, conocida como ARPANET, entre tres

universidades en California y una en Utah, Estados Unidos




¿Qué es Web? “La cara gráfica de Internet”

La parte multimedia de Internet

Es un espacio de almacenamiento y un sistema de publicación mundial al que se accede en cualquier momento y desde cualquier lugar

Compuesta por millones de sitios web, cada uno de los cuales puede tener varias páginas

Web: Hipertexto + Internet


PONENCIA Evolución de la Web PONENCIA


La Web de hoy es un universo de aplicaciones y páginas web

interconectadas lleno de vídeos, fotos y contenido interactivo. Lo que

no ve el usuario es cómo interactúan los navegadores y las tecnologías

web para hacer que esto sea posible.

A lo largo del tiempo, las tecnologías web han evolucionado hasta

permitir que los desarrolladores puedan crear nuevas e increíbles

experiencias web.





1957 Agencia de Proyectos

de Investigaciones

avanzadas (ARPA)

1967 Hombre llega a la

luna.

Marca el inicio de las

comunicaciones

globales.




1969 ARPA partiendo de las experiencia y

conocimientos en el capo de las

tecnologías de redes, crea ARPANET

1990

ARPAnet se desmantela y aparecen :

MILNET: caracter militar.

INTERNET: naturaleza publica, orientada al mundo académico, científico e

industrial.




“Internet es una red de computadoras, formada a su vez

por muchas redes independientes, que se pueden

comunicar unas con otras, intercambiar mensajes y

compartir información en forma de archivos” Correo Electrónico (E-Mail) - Listas de correos

World Wide Web (WWW), el uso de

Transferencia de archivos (FTP)

Buscadores News

Conferencias (Chat services) y Talk

multimedios




1991

Lee, crea la Word Tim Berners

Wide Web

WWW.

mas conocida como

Propuso un nuevo sistema de

"hipertexto" para compartir

documentos.

HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

http://WWW/

http://WWW/

http://WWW/

http://WWW/



• La Web ha pasado por tres etapas o generaciones muy claras, a saber:

No obstante, la evolución continua de la tecnología hace un poco complicado

establecer los límites exactos de fecha en los cuales, podemos decir que la

Web es de una generación u otra, ya que en la realidad lo que vemos es una

superposición de cada una de estas generaciones según el sitio web que

examinemos. Sin embargo trataremos de hacer una aproximación grosera a

efectos de clasificación.

1ª Generación o Generación de Contenido

Estático

2ª Generación o Generación de Contenido Dinámico o Interactivo

3ª Generación o Generación de Contenido

Colaborativo




• La 1ª Generación de la Web o Generación de Contenido Estático, se

corresponde con la Web que va desde que se crea por Tim Berners-Lee

hasta la aparición de la 2ª Generación a mediados de los años 90.

• Esta generación se caracteriza porque las páginas Web son

completamente estáticas, es decir, el contenido que presentan es el que

es y no permiten al usuario realizar ningún tipo de interacción con las

mismas, salvo la manipulación propia del manejo del hipertexto y los

hiperenlaces, esto es, saltar de una página web a otra.

1ª Generación o Generación de Contenido Estático




La 2ª Generación de la Web o Generación de Contenido Dinámico, se corresponde

con la Web en la que aparecen las primeras técnicas para permitir la inclusión de

contenido dinámico, se puede decir que es la Web que hoy por hoy está más extendida y

es la que se utiliza más comúnmente.

Esta generación se caracteriza porque las páginas Web son generadas por alguna de las

tecnologías vistas para la generación de contenido dinámico (CGIs, ASP, ASP.NET, JSP

o PHP, entre otros), permiten la interacción con el usuario en un nivel en donde éste,

puede hacer preguntas y el sistema presenta las respuestas en función de los criterios

introducidos en formularios. La experiencia del usuario queda limitada a él y a la

aplicación que utiliza.

2ª Generación o Generación de Contenido Dinámico o Interactivo




De la 3ª Generación de la Web, podemos decir que es el modelo que se está

imponiendo poco a poco, y que haciendo uso de las capacidades adquiridas en la

generación anterior, permite que la experiencia del usuario con la Web mejore

espectacularmente.

En esta generación, las aplicaciones van más allá de la mera interacción entre

aplicación-usuario-aplicación, ahora ellas son el mecanismo que permiten que se

produzca interacción entre usuario-usuario llegando a crearse un entorno de

contenido colaborativo, en donde, el usuario es un participante más en la

creación del contenido que aparece en la web.

3ª Generación o Generación de Contenido Colaborativo




Ideas como los wikis, los blogs, etc. han cambiado la forma en la que el usuario

interactúa con la web haciendo de esta un lugar mucho más rico e interesante para

trabajar.

Más adelante veremos que muchos de estas ideas se engloban en algo mucho más

amplio y que se denomina Web 2.0

3ª Generación o Generación de Contenido Colaborativo




La Web actual es el resultado de los continuos esfuerzos de una comunidad

web abierta que ayuda a definir estas tecnologías web, tales como HTML5,

CSS3 y WebGL, y garantiza que todos los navegadores web las admitan.

Las líneas de color de esta visualización representan la interacción entre

los navegadores y las tecnologías web, lo que ha permitido el desarrollo

del gran número de aplicaciones web increíbles que utilizamos a diario.


PONENCIA PONENCIA



Conceptualización de la Web

Web es un vocablo inglés que significa “red”, “telaraña” o “malla”.

Una web es aquella que consiste en un documento electrónico que contiene

información, cuyo formato se adapta para estar insertado en la World Wide

Web, de manera que los usuarios a nivel mundial puedan entrar a la misma

por medio del uso de un navegador, visualizándola con un dispositivo móvil

como un smartphone o un monitor de computadora.

El término, de todas formas, tiene varios usos. Además de nombrar a Internet en

general, la palabra web puede servir hacer mención a una página web, un sitio

web o hasta un servidor web.

PONENCIA

• En inglés website o web site, un sitio web es un sitio

(localización) en la World Wide Web que contiene

documentos (páginas web) organizados

jerárquicamente.

• Cada documento (página web) contiene texto y o

gráficos que aparecen como información digital en la

pantalla de un ordenador. Un sitio puede contener una

combinación de gráficos, texto, audio, vídeo, y otros

materiales dinámicos o estáticos.

Sitio web

HIPERTEXTO - HIPERMEDIOS

PONENCIA




PONENCIA PONENCIA

• En informática, es el nombre que recibe el texto que en

la pantalla de un dispositivo electrónico, permite

conducir a otros textos relacionados, pulsando con el

ratón en ciertas zonas sensibles y destacadas

Hipertexto




PONENCIA PONENCIA

• Término que hace referencia al conjunto de métodos para

escribir, diseñar, o componer contenidos que tengan texto,

video, audio, mapas, etc, y que poseen interactividad con

los usuarios.

Hipermedio




PONENCIA PONENCIA

World Wide Web (o la "Web") o Red Global Mundial es un sistema de

documentos de hipertexto y/o hipermedios enlazados y accesibles a través

de Internet. Con un navegador Web, un usuario visualiza páginas web que

pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y

navega a través de ellas usando hiperenlaces.

¿Qué es la www?




PONENCIA PONENCIA

El protocolo de transferencia de hipertexto (HTTP, HyperText Transfer Protocol) es el protocolo

usado en cada transacción de la Web (WWW).

HTTP define la sintaxis y la semántica que utilizan los elementos software de la arquitectura web

(clientes, servidores, proxies) para comunicarse.

Es un protocolo orientado a transacciones y sigue el esquema petición-respuesta entre un

cliente y un servidor.

Al cliente que efectúa la petición (un navegador) se lo conoce como "user agent" (agente del

usuario). A la información transmitida se la llama recurso y se la identifica mediante un URL.

¿Qué es http?




PONENCIA PONENCIA

Acrónimo de Uniform Resource Locator (Localizador Uniforme de Recursos

/Identificador Uniforme de Recursos). Sistema unificado de identificación de recursos en la

red. Es el modo estándar de proporcionar la dirección de cualquier recurso en Internet.

¿Qué es URL?

Dirección Única Combina nombre de servidor, archivo y

protocolo

http://www.google.com.ec




PONENCIA PONENCIA

Una página web es una fuente de información

adaptada para la World Wide Web (WWW) y

accesible mediante un navegador de Internet.

Esta información se presenta generalmente en

formato HTML y puede contener hiperenlaces a

otras páginas web, constituyendo la red enlazada

de la World Wide Web.

¿Qué es una página web?




http://es.wikipedia.org/wiki/World_Wide_Web





PONENCIA PONENCIA

¿Cuáles son los tipos de páginas web?

Los sitios Web estáticos son

aquellos sitios enfocados

principalmente a mostrar una

información permanente, donde

el navegante se limita a obtener

dicha información, sin que pueda

interactuar con la página Web

visitada.

Estáticas



Tipos de Páginas Web

PONENCIA PONENCIA




Al principio, el Web estaba poblado únicamente por páginas estáticas

El servidor Web simplemente localizaba el documento solicitado en el URL y se lo

entregaba al cliente

Este enfoque puede ser perfectamente válido para muchos sitios

Siempre y cuando no requieran actualizaciones continuas, ya que hay que eso implica o

bien modificar, a mano, las páginas existentes, o bien crear una nueva

Pero no permitiría, por ejemplo, crear un sitio de comercio

electrónico donde se pueda comprar, o el de un banco

Es necesario acceder a datos en el servidor y crear una página a petición

Estáticas

PONENCIA PONENCIA




Estáticas

Funcionamiento de las páginas estáticas

PONENCIA PONENCIA

¿Cuáles son los tipos de páginas web?

Se conoce con el nombre de página

web dinámica a aquélla, cuyo

contenido se genera a partir de lo

que un usuario introduce en un web

o formulario.

El contenido de la página no está

incluido en un archivo html como en

el caso de las páginas web estáticas.

Dinámicas




PONENCIA PONENCIA




Dinámicas

Funcionamiento de las páginas dinámicas

PONENCIA PONENCIA




Dinámicas

El esquema de funcionamiento de las páginas dinámicas es siempre similar

independientemente de en qué se hayan desarrollado éstas

CGI, ASP, Servlets/JSP…

El servidor Web detecta una petición de una página dinámica y se la pasa al

programa necesario

Podría ser una extensión del servidor

O bien un programa completamente independiente

Éste programa es quien sabe cómo interpretar el código de la página para

devolver el HTML apropiado

PONENCIA PONENCIA


Los sitios se pueden clasificar de muchas maneras.

Cada tipo de sitio tiene unas características y limitaciones propias.

Una buena organización es vital para conseguir los objetivos del

Sitio.

ESTÁTICAS DINÁMICAS



PONENCIA PONENCIA




• Públicos: Es un WebSite normal, una página dirigida al público

general, sin restricciones de acceso en principio.

• Extranet: Son Sitios limitados por el tipo de usuarios que pueden

acceder, por ejemplo los proveedores de una empresa

determinada, o los clientes.

• Intranet: Son sitios cuyo acceso está restringido a una empresa u

organización, normalmente funcionan dentro de redes privadas,

aunque no siempre es así.

Por su audiencia

PONENCIA PONENCIA




• Sitios Interactivos: hipermediales (videos, sonidos, animaciones, etc)

• Sitios estáticos: Los usuarios no pueden modificar o añadir nada al sitio, de

cuyos contenidos se encargan exclusivamente sus diseñadores.

• Sitios Dinámicos: El mismo consiste en la formación de una página, tanto de

gráficos como de contenidos, a partir de la lectura de determinados datos

residentes en una base de datos.

Por su dinamismo

PONENCIA PONENCIA




• Estructura abierta: Todos los documentos disponen de su dirección y los

usuarios pueden acceder a cualquier punto del WebSite.

• Estructura cerrada: Un ejemplo sería un sitio que requiere un registro

previo para entrar, el usuario siempre tendría que pasar primero por el

registro antes de poder acceder al resto de la página.

• Estructura semicerrada: obliga los usuarios a acceder por unos puntos

específicos, cómo por ejemplo sólo la página principal y las páginas de

entrada a las secciones más importantes.

Por su apertura

PONENCIA PONENCIA




Comerciales

Personales

Informativos

Ocio

Navegación

Artístico

Por sus objetivos

PONENCIA PONENCIA



Estructura de las Paginas Web

Jerárquica

• La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es

la hoja de bienvenida, esta hoja se puede también sustituir por la hoja de

contenido, en la que se exponen las diferentes secciones que contendrá

nuestro sitio. La selección de una sección nos conduce asimismo a una lista

de subtemas que pueden o no dividirse.

PONENCIA PONENCIA




Lineal

• La estructura lineal es la más simple de todas, la manera de

recorrerla es la misma que si estuviésemos leyendo un libro, de

manera que estando en una página, podemos ir a la siguiente

página o a la anterior.

PONENCIA PONENCIA




Lineal con jerarquía

• Este tipo de estructura es una mezcla de la dos anteriores,

los temas y subtemas están organizados de una forma

jerárquica, pero uno puede leer todo el contenido de una

forma lineal si se desea.

PONENCIA PONENCIA




Red

• La estructura de red es una organización en la que

aparentemente no hay ningún orden establecido, las

páginas pueden apuntarse unas a otras sin ningún orden

aparente.

PONENCIA PONENCIA



Anatomía de una Pagina Web

La composición de una página web como ésta puede considerarse desde

el punto de vista de su diseño o atendiendo a las partes y tipos de fichero

que la componen.

Es preciso entender bien de qué está formada una página para poder

aprender con éxito como crearlas y modificarlas.

Una página web es superficialmente parecida a cualquier otro

documento: un texto, unas imágenes, todo compuesto de una

determinada manera.

PONENCIA PONENCIA




Se trata simplemente de un fichero de texto, con una extensión HTML (de

hypertext markup language - lenguaje de hipertexto.).

El fichero contiene el texto más una

serie de códigos que permiten dar

formato a la página en el

navegador.

PONENCIA PONENCIA




Titulo de la web

Banner

Enlaces

Imágenes

Contenido

Pie de página (derechos

reservados)

PONENCIA PONENCIA



Anatomía de una Pagina Web Estructura de archivos en una sitio web Se recomienda que todo sitio web sea almacenado en una estructura de archivos como la siguiente:

Observe que debe de almacenar una página con el

nombre index.html, ya que los servidores reconocen

este archivo como la página inicial en todo sitio.

CONCLUSION UNIDAD



CONCLUSION UNIDAD



¿Puedo publicar mi sitio web en un hosting

gratuito?

¿Puedo registrar dominios en otro país que no sea

Ecuador?

¿Un sitio web que ofrece la posibilidad de visualizar

y descargar video y música, puede considerarse

dinámico?

¿Puedo establecer como página inicio de mi sitio

web, un archivo de nombre inicio.html?

¿Cuánto es el costo de producción de un sitio web?

CONCLUSION UNIDAD



• ACTIVIDAD DE APRENDIZAJE:

UNIDAD 1

• ACTIVIDAD DE APRENDIZAJE:

FORO TEMÁTICO 1

• ACTIVIDAD DE APRENDIZAJE :

EVALUACIÓN UNIDAD 1

ponencia unidad no. 1 introducciÓn a la web

Education