Diseno web introduccion

Unidad Curricular
Introducción a la Web
Introducción a la
Web
Lic.Ariel Torres

PONENCIA
Alfinalizarestaunidadelestudiante:
 Conoce los conceptos sobre www, http, web,
sitio web einternet.
 Identifica cada una de las generaciones de la
web
 Distingue los tipos de sitios web.
3
Unidad I Introducción al Diseño Web

TiempoProgramado
:
1 y 2 semana 3
PONENCIA

MENSAJE MOTIVACIONAL
“El fracaso es una gran oportunidad
paraempezarotravezconmás
inteligencia.”

UNIDAD I
INTRODUCIÓNA LAWEB
PONENCIA

1. ORIGEN DE LA WEB
UNIDADI
2. EVOLUCIÓNDELA
WEB
5. ANATOMIA Y
ESTRUCTURA DE UN
SITIO WEB
5. TIPOS DE
PAGINAS WEB
3. CONCEPTUALIZACIÓN
4. NAVEGANDOPORLAWEB
PONENCIA TEMARIO

Origen de laWeb
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
abogadoporsuvisióndeunaWeb Semántica,empezóaescribirunprogramaquele
permitiera almacenarinformació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
vezdaríanorigenaunnuevoserviciodeInternet(mejordiríamosunanuevaformadeusar
laRed)queacabaríaarrasando,yaunnuevoparadigmadearquitecturadelainformación:
Los "Hypermedia".
P
PO
ON
NE
EN
NC
CIIA
A

Origen de laWeb
Laspáginasdehipertexto,consushipervínculosenlazandoinformaciónencualquierparte
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,
comolaWeb es, entre otras cosas, una "interfase" para utilizar la red (detremendo
éxito),muchosdelosserviciossehan"maquilladodeWeb",adoptandoformascompatibles
con losnavegadores.
P
PO
ON
NE
EN
NC
CIIA
A

¿Qué es Internet?
Origen de laWeb
• Incluye distintosservicios:
– Correo electrónico. 1971,RayTomlinson
– Chat (o IRC).1988, en Finlandia
– Transferencia dearchivos
– Foros dediscusión
– World Wide Web, 1989, Tim Berners Lee
P
PO
ON
NE
EN
NC
CIIA
A

¿Qué es Internet?
Origen de laWeb
UnodelosserviciosquemáséxitohatenidoenInternet
ha sido la World Wide Web (WWW, o "la Web"), hasta
talpuntoqueeshabituallaconfusiónentreambos
términos.
P
PO
ON
NE
EN
NC
CIIA
A

¿Qué es Internet?
Origen de laWeb
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
universidadesenCaliforniayunaenUtah,EstadosUnidos
P
PO
ON
NE
EN
NC
CIIA
A

Origen de laWeb
¿Qué es Web?
 “La cara gráfica de Internet”
 La parte multimedia de Internet
 Esunespaciodealmacenamientoyunsistemadepublicaciónmundialal
queseaccedeencualquiermomentoydesdecualquierlugar
 Compuestapormillonesdesitiosweb,cadaunodeloscualespuedetener
varias páginas
Web:Hipertexto+Internet
P
PO
ON
NE
EN
NC
CIIA
A

Evolución de 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
noveelusuarioescómointeractúanlosnavegadoresylastecnologí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.
P
PO
ON
NE
EN
NC
CIIA
A

1957
Agencia deProyectos
de Investigaciones
avanzadas(ARPA)
1967
Hombrellegaala
luna.
Marcaeliniciodelas
comunicaciones
globales.
P
PO
ON
NE
EN
NC
CIIA
A

1969
P
PO
ON
NE
EN
NC
CIIA
A Evolución de la Web
ARPA partiendo de las experiencia y
conocimientos en el capo de las
tecnologíasderedes,creaARPANET
1990
ARPAnet se desmantela y aparecen :
MILNET: caracter militar.
INTERNET: naturaleza publica, orientada al mundo académico, científico e
industrial.

P
PO
ON
NE
EN
NC
CIIA
“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
P
PO
ON
NE
EN
NC
CIIA
Tim Berners
Wide Web
WWW.
Lee, crea la Word
mas conocida como
Propuso un nuevo sistema de
"hipertexto" para compartir
documentos.
HyperText Markup Language
(Lenguaje de Marcas de Hipertexto)

• La Web ha pasado por tres etapas o generaciones muy claras, a saber:
1ª Generación o
Generación de Contenido
Estático
2ª Generación o
Dinámico o Interactivo
3ª Generación o
Colaborativo
No obstante, la evolución continua de la tecnología hace un poco complicado
establecerloslímitesexactosdefechaenloscuales,podemosdecirquela
Webesdeunageneraciónuotra,yaqueenlarealidadloquevemosesuna
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 declasificación.
P
PO
ON
NE
EN
NC
CIIA
A

1ª Generación o Generación de Contenido Estático
• La 1ª Generación de la Web o Generación de Contenido Estático,se
correspondeconlaWebquevadesdequesecreaporTimBerners-Lee
hasta la aparición dela 2ª Generación a mediados de los años 90.
• Esta generación se caracteriza porque las páginas Web son
completamente estáticas,esdecir,elcontenidoquepresentaneselque
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,estoes,saltardeunapáginawebaotra.
P
PO
ON
NE
EN
NC
CIIA
A

2ªGeneraciónoGeneracióndeContenidoDinámicooInteractivo
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,sepuededecirqueeslaWebquehoyporhoyestámásextendiday
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íasvistasparalageneracióndecontenidodiná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 queutiliza.
P
PO
ON
NE
EN
NC
CIIA
A

3ªGeneraciónoGeneracióndeContenidoColaborativo
Dela3ªGeneracióndelaWeb,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,ahoraellassonelmecanismoquepermitenquese
produzcainteracciónentreusuario-usuariollegandoacrearseunentornode
contenido colaborativo, en donde, el usuario es un participante más en la
creación del contenido que aparece en la web.
P
PO
ON
NE
EN
NC
CIIA
A

3ªGeneraciónoGeneracióndeContenidoColaborativo
Ideascomoloswikis, los blogs, etc.hancambiadolaformaenlaqueelusuario
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
P
PO
ON
NE
EN
NC
CIIA
A

 La Web actual eselresultado de los continuosesfuerzos de una comunidad
webabiertaque ayudaadefinirestas tecnologías web,talescomoHTML5,
CSS3yWebGL,ygarantizaquetodoslosnavegadoresweblasadmitan.
 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
delgrannúmerodeaplicacioneswebincreíblesqueutilizamosadiario.
P
PO
ON
NE
EN
NC
CIIA
A

P
PO
ON
NE
EN
NC
CIIA
A Evolución de laWeb

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,demaneraquelosusuariosanivelmundialpuedanentraralamisma
por medio del uso de un navegador, visualizándola con un dispositivo móvil
como un smartphone o un monitor de computadora.
Web esun vocabloinglés quesignifica “red”, “telaraña” o “malla”.
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.
P
PO
ON
NE
EN
NC
CIIA
A Conceptualización de laWeb

P
PO
ON
NE
EN
NC
CIIA
Sitio web • Eningléswebsite o web site,unsitiowebesunsitio
(localización) en la World Wide Web quecontiene
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
pantalladeunordenador.Unsitiopuedeconteneruna
combinación de gráficos, texto, audio, vídeo, y otros
materiales dinámicos o estáticos.
HIPERTEXTO -HIPERMEDIOS

P
PO
ON
NE
EN
NC
CIIA
Hipertexto
• 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ónenciertaszonassensiblesydestacadas

Hipermedio
• Términoque hace referencia al conjunto de métodospara
escribir,diseñar,ocomponercontenidosquetengantexto,
video,audio,mapas,etc,yqueposeeninteractividadcon
los usuarios.
P
PO
ON
NE
EN
NC
CIIA

¿Qué es lawww?
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.
P
PO
ON
NE
EN
NC
CIIA

¿Qué es http?
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.
Esunprotocoloorientadoatransaccionesysigueelesquemapetición-respuestaentreun
cliente y unservidor.
Alcliente queefectúala petición(unnavegador)seloconocecomo"useragent"(agente del
usuario).AlainformacióntransmitidaselallamarecursoyselaidentificamedianteunURL.
P
PO
ON
NE
EN
NC
CIIA

¿Qué es URL?
Acrónimo de Uniform Resource Locator (Localizador Uniforme de Recursos
/Identificador Uniforme de Recursos). Sistema unificado de identificación de recursos en la
red.EselmodoestándardeproporcionarladireccióndecualquierrecursoenInternet.
Dirección Única
Combina nombre de
servidor, archivo y
protocolo
http://www.google.com.ec
P
PO
ON
NE
EN
NC
CIIA

P
PO
ON
NE
EN
NC
CIIA
A
¿Qué es una página web?
Una página web es una fuente de información
adaptadaparalaWorldWideWeb(WWW)y
accesible mediante un navegador de Internet.
Esta información se presenta generalmente en
formato HTML y puede contener hiperenlaces a
otraspáginasweb,constituyendo laredenlazada
de la World Wide Web.
Conceptualización de la Web

P
PO
ON
NE
EN
NC
CIIA
A Tipos de Páginas Web
¿Cuáles son los tipos de páginas web?
unanueva
LossitiosWebestáticosson
aquellos sitios enfocados
principalmenteamostraruna
informaciónpermanente,donde
elnaveganteselimitaaobtener
dichainformación,sinquepueda
interactuarconlapáginaWeb
visitada.
Estáticas

P
PO
ON
NE
EN
NC
CIIA
A
Estáticas
TiposdePáginas Web
Funcionamientodelas páginasestáticas

P
PO
ON
NE
EN
NC
CIIA
A
¿Cuáles son los tipos de páginas web?
Dinámicas
Seconoceconelnombredepágina
web dinámica a aquélla, cuyo
contenidosegeneraapartirdelo
queunusuariointroduceenunweb
o formulario.
Elcontenidodelapáginanoestá
incluidoenunarchivohtmlcomoen
el casode las páginaswebestáticas.
TiposdePáginasWeb

P
PO
ON
NE
EN
NC
CIIA
A
Dinámicas
TiposdePáginasWeb
Funcionamientodelas páginasdinámicas

P
PO
ON
NE
EN
NC
CIIA
 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…
 ElservidorWebdetectaunapeticióndeunapáginadinámicayselapasaa
l
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áginapara
devolver el HTMLapropiado
Dinámicas

ESTÁTICAS DINÁMICAS
P
PO
ON
NE
EN
NC
CIIA
Lossitiossepuedenclasificardemuchasmaneras.
Cadatipodesitiotieneunascaracterísticasylimitacionespropias.
Una buena organización es vital para conseguir los objetivos del
Sitio.

P
PO
ON
NE
EN
NC
CIIA
A
Por su audiencia
Tipos de Páginas Web
• Públicos: Es un WebSite normal, una página dirigida al público
general,sinrestricciones deaccesoenprincipio.
• 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í.

P
PO
ON
NE
EN
NC
CIIA
• SitiosInteractivos:hipermediales(videos,sonidos,animaciones,etc)
• Sitiosestáticos:Losusuariosnopuedenmodificaroañadirnadaalsitio,de
cuyoscontenidosseencarganexclusivamentesusdiseñadores.
• SitiosDinámicos:Elmismoconsisteenlaformacióndeunapágina,tantode
gráficos como de contenidos, a partir de la lectura de determinados datos
residentes en una base de datos.
Porsudinamismo

P
PO
ON
NE
EN
NC
CIIA
• Estructura abierta: Todos los documentos disponen de su dirección y los
usuariospuedenaccederacualquierpuntodelWebSite.
• 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
registroantesdepoderaccederalrestode lapágina.
• Estructura semicerrada: obligalosusuariosaaccederporunospuntos
específicos, cómo por ejemplo sólo la página principal y las páginas de
entrada a las secciones más importantes.
Porsuapertura

P
PO
ON
NE
EN
NC
CIIA
A
Porsusobjetivos
Comerciales
Personales
Informativos
Ocio
Navegación
Artístico
TiposdePáginas Web

Jerárquica
P
PO
ON
NE
EN
NC
CIIA
A EstructuradelasPaginasWeb
• La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es
lahojadebienvenida,estahojasepuedetambiénsustituirporlahojade
contenido,enlaqueseexponenlasdiferentesseccionesquecontendrá
nuestro sitio. La selección de una sección nos conduce asimismo a una lista
de subtemas que pueden o no dividirse.

Lineal
P
PO
ON
NE
EN
NC
CIIA
• 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
maneraqueestandoenunapágina,podemosiralasiguiente
página o a la anterior.

P
PO
ON
NE
EN
NC
CIIA
A
Lineal con jerarquía
EstructuradelasPaginasWeb
• 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.

Red
P
PO
ON
NE
EN
NC
CIIA
• 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.

P
PO
ON
NE
EN
NC
CIIA
A AnatomíadeunaPaginaWeb
La composición de una página web como ésta puede considerarse desde
elpuntodevistadesudiseñooatendiendoalaspartesytiposdefichero
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.

P
PO
ON
NE
EN
NC
CIIA
Setratasimplementedeunficherodetexto,conunaextensión HTML (de
hypertext markuplanguage-lenguajedehipertexto.).
Elficherocontieneeltextomásuna
serie de códigos que permitendar
formato a la página en el
navegador.

P
PO
ON
NE
EN
NC
CIIA
 Titulo de laweb
 Banner
 Enlaces
 Imágenes
 Contenido
 Piedepágina(derechos
reservados)

P
PO
ON
NE
EN
NC
CIIA
A
Estructuradearchivosenunasitioweb
AnatomíadeunaPaginaWeb
Se recomiendaquetodo sitioweb sea almacenadoen unaestructuradearchivoscomola siguiente:
Observe quedebedealmacenarunapáginacon el
nombreindex.html,yaquelosservidoresreconocen
estearchivocomolapáginainicialentodositio.

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
ydescargarvideoymúsica,puedeconsiderarse
dinámico?
 ¿Puedoestablecercomopáginainiciodemisitio
web,unarchivodenombreinicio.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ÁTICO1
• ACTIVIDAD DE APRENDIZAJE :
EVALUACIÓNUNIDAD1

Diseno web introduccion

Más contenido relacionado

La actualidad más candente

Similar a Diseno web introduccion

Último

Diseno web introduccion