Ponencia Unidad No. 1 INTRODUCCIÓN A LA WEB
-
Upload
victor-hugo-chavez-salazar -
Category
Education
-
view
477 -
download
2
description
Transcript of 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.
Introducción a la Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
3
PONENCIA
Tiempo Programado:
1 y 2 semana
Unidad I Introducción al Diseño Web
Introducción a la Web
MENSAJE MOTIVACIONAL
“El fracaso es una gran oportunidad
para empezar otra vez con más
inteligencia.”
Introducción a la Web
Unidad I Introducción al Diseño Web
PONENCIA
UNIDAD I INTRODUCIÓN A LA WEB
Introducción a la Web
Unidad I Introducción al Diseño Web
PONENCIA TEMARIO
Introducción a la Web
Unidad I Introducción al Diseño Web
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
Introducción a la Web
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".
Unidad I Introducción al Diseño Web
PONENCIA Origen de la Web PONENCIA
Introducción a la Web
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.
Unidad I Introducción al Diseño Web
PONENCIA Origen de la Web PONENCIA
Introducción a la Web
¿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
Unidad I Introducción al Diseño Web
PONENCIA Origen de la Web PONENCIA
Unidad I Introducción al Diseño Web
Introducción a la Web
¿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.
PONENCIA Origen de la Web PONENCIA
Introducción a la Web
¿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
Unidad I Introducción al Diseño Web
PONENCIA Origen de la Web PONENCIA
Introducción a la Web
¿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
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
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.
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
1957 Agencia de Proyectos
de Investigaciones
avanzadas (ARPA)
1967 Hombre llega a la
luna.
Marca el inicio de las
comunicaciones
globales.
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
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.
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
“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
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
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)
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
• 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
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
• 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
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
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
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
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
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
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
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
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.
Unidad I Introducción al Diseño Web
PONENCIA Evolución de la Web PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Conceptualización de la Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Conceptualización de la Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Conceptualización de la Web
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?
Introducción a la Web
Unidad I Introducción al Diseño Web
Conceptualización de la Web
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?
Introducción a la Web
Unidad I Introducción al Diseño Web
Conceptualización de la Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Conceptualización de la Web
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?
Introducción a la Web
Unidad I Introducción al Diseño Web
Conceptualización de la 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
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
Dinámicas
Funcionamiento de las páginas dinámicas
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
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
Introducción a la Web
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
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
• 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
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
• 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
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
• 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
Introducción a la Web
Unidad I Introducción al Diseño Web
Tipos de Páginas Web
Comerciales
Personales
Informativos
Ocio
Navegación
Artístico
Por sus objetivos
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Estructura de las Paginas Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Estructura de las Paginas Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Estructura de las Paginas Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Anatomía de una Pagina Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
Anatomía de una Pagina Web
Titulo de la web
Banner
Enlaces
Imágenes
Contenido
Pie de página (derechos
reservados)
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
Anatomía de una Pagina Web
Titulo de la web
Banner
Enlaces
Imágenes
Contenido
Pie de página (derechos
reservados)
PONENCIA PONENCIA
Introducción a la Web
Unidad I Introducción al Diseño Web
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
Introducción a la Web
Unidad I Introducción al Diseño Web
CONCLUSION UNIDAD
Introducción a la Web
Unidad I Introducción al Diseño Web
¿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
Introducción a la Web
Unidad I Introducción al Diseño Web
• ACTIVIDAD DE APRENDIZAJE:
UNIDAD 1
• ACTIVIDAD DE APRENDIZAJE:
FORO TEMÁTICO 1
• ACTIVIDAD DE APRENDIZAJE :
EVALUACIÓN UNIDAD 1