TALLER DE PROGRAMACIÓN CONCURRENTE

Sesión 01 – Introducción a la tecnología web

Ing. Ernesto Rafael Gaona

Tecnología Web
La Tecnología Web es aquella que hace uso de recursos tecnológicos para la interconexión
de ordenadores y las tecnologías de presentación y configuración e implementación de
páginas Web, presentando su funcionamiento tan intuitivo y sencillo al usuario

Navegadores
Web
Tecnología de
Desarrollo de
Páginas Web
Servidores Web
Tecnología
Web
URL (Localizador
Tecnología de Uniforme de
Interconexión Recursos)
de
Ordenadores
Otras
Herramientas
Tecnológicas
Evolución de la WEB
• WEB 1.0: El comienzo de la web data de los años 60, donde el usuario es un mero
consumidor del contenido que es subido a servidores por parte de expertos informáticos.
En esta etapa los navegadores eran solo de texto (ELISA) y a pesar de que eran muy
simples, disfrutaban de una gran rapidez.

• WEB 2.0: El usuario no solo accede a la información, sino también lo crea, trayendo
consigo la creación de grupos, como son las redes sociales, los blogs, las wikis entre otras.

• WEB 3.0: Abre nuevas formas de comunicación y colaboración utilizando espacios

tridimensionales. Ya no solo se accede a la web desde el navegador, sino que se hace uso
de otros dispositivos y tecnología inteligente. En la web 3.0 el contenido y el conocimiento
se relacionan de manera más eficiente.

• WEB 4.0: En esta etapa la inteligencia artificial aparece como principal tecnología
haciendo que los sitios sean inteligentes y capaces de interactuar y responder a las
necesidades de los usuarios.
Importancia de la Tecnología WEB
VENTAJAS
• Acceso global a los datos en tiempo real desde cualquier lugar del mundo a través de
Internet.
• Acelerar el aprendizaje e impulsar la creatividad mediante buscadores.
• Trabajo colaborativo. Grupo de personas que actualizan o comparten información

DESVENTAJAS
• Seguridad de datos
• Dependencia del internet
• Delitos informáticos
URL (Localizador Uniforme de Recursos)

Existe un URL único para cada página

Arquitectura Cliente Servidor

La web es un sistema de
información distribuido
basado en hipertexto. (http –
Protocolo de transferencia
de hipertexto)

Los usuarios, mediante un

navegador (cliente) solicitan
recursos (normalmente
páginas web) a un servidor
web.

El cliente envía una petición

el servidor produce una
respuesta (una página HTML)
Arquitectura Cliente Servidor
• Navegadores de Internet
Opera, Mozilla, Firefox, Netscape, etc.

• Servidores Web
HTTP Apache, Internet Information Services ISS

• Lenguajes de Programación
-HTML: El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para
estructurar y desplegar una página web y sus contenidos.
-CSS: «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y
crear la presentación de un documento estructurado escrito en un lenguaje de
marcado.
-JavaScrip, Java, ASP, PHP, .NET, ETC
 HTML
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una
página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o
imágenes y tablas de datos.
HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu
contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del
contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden
hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva,
agrandar o achicar la letra, etc.

Su Extensión es .html
CSS (Hojas de Estilo en Cascada)
• Lenguaje usado para
definir la
presentación de un
documento
estructurado (HTML)

• La idea que se
encuentra detrás del
desarrollo de CSS es
separar la estructura
de un documento de
su presentación.

• Su Extensión es .css
PHP (Hypertext Preprocessor)
• Usado principalmente para sitios
dinámicos
• Del lado del servidor
• Embebido en HTML
• Necesita de servidor Web (Apache o
IIS con las librerías de PHP)
• Lenguaje Libre
• Multiplataforma
• Destaca su conectividad con MySQL
• Su Extensión es .php
 TALLER DE PROGRAMACIÓN CONCURRENTE
Sesión 01 – Elaboración de un mapa de navegación

Ing. Ernesto Rafael Gaona

Estructura de una página de WEB
• Los elementos de una página web están
dispuestos de tal forma que puedes visualizarlos
en textos, imágenes, videos, entre otros y
siempre se trata de colocarlos de tal manera que
puedas entenderlos y darles uso. Esa manera de
colocar estos elementos se denomina “estructura
de la página”.
• La estructura de un sitio web comprende la forma
en la que se relacionan las páginas que la
integran, así como la experiencia del usuario
mientras navega por la misma.
• Esto es algo más que la distribución de los
elementos que has visto en algunas páginas
web, es decir, no es la apariencia o simplemente
el menú de navegación que puedes visualizar al
momento de ingresar.
• La estructura de tu página web es algo más
interno pero que puede ser fácil de manejar por
un profesional de diseño web o el encargado de
gestionarla.
Pasos Para Implementar una WEB

Prediseño Se corrigen los elementos

pre diseño que no
cumplen con los requisitos

Se corrigen los elementos de

Construcción diseño que no funcionan
correctamente o se visualizan de
acuerdo a los previsto

Implementación
en un servidor

Experiencia Promoción
Criterios Para Implementar una WEB
Se determinan
¿Para que? mutuamente
Objetivos

Qué debe contener ¿Para que público?

para cumplir los ¿Qué,
objetivos Cuánto?
Contenidos
Que les interesa

Cómo se organizan
Estructura
Cómo buscarán
Cómo se
encuentran las
cosas Visualización
Estética, Cultura,
Gustos
 Backend y Frontend
Frontend es la
parte de un sitio
web que interactúa
con los usuarios,
por eso decimos
que está del lado
del cliente.
Backend es la parte
que se conecta con
la base de datos y
el servidor que
utiliza dicho sitio
web, por eso
decimos que el
backend corre del
lado del servidor.
Partes de una página Web
• Cabecera o “header”, generalmente está ubicada en la parte superior de la
página.
• Logo: Es la marca o título con la que identificas tu página.
• Menú: Esta sección de tu página web puedes encontrarlo también al pie de la
misma.
• Cuerpo de la Página o “body”: Es donde introduces los contenidos principales.
• Pie de página o “footer”: en esta sección se ubican los créditos, copyright,
cierre.
Estructura de una página Web
Estructura semántica sencilla

•Un encabezado <header> en la parte superior, con

un logo y un eslogan, por ejemplo.

•Una barra de navegación <nav> en la parte

izquierda de la página.

•Toda la actualidad del sitio web se podrá situar en

elementos <article>.

•Para terminar, el pie de página <footer> podrá

contener las menciones legales, los enlaces de
contacto, etc
Estructura semántica más elaborada
•Un encabezado <header> en la parte superior.
•Más abajo, una barra de navegación <nav> para la
navegación general del sitio web, para navegar
entre las páginas.
•A la izquierda, una segunda caja <nav> para la
navegación secundaria, para los enlaces
relacionados directamente con el contenido de la
página mostrada.
•A la derecha, un elemento <aside> muestra la
información relacionada con el contenido de la
página, como los enlaces promocionales, los
contenidos relacionados, etc.
•El contenido de la página se muestra en dos
elementos <section>, que permiten de esta manera
diferenciar correctamente estos dos contenidos
•Pie de página <footer> podrá contener las
menciones legales, los enlaces de contacto, etc
Herramienta para estadísticas https://analytics.google.com/analytics/web/provision/#/provision
Pasos para estructurar un Sitio Web
• Paso 1: Hacer el árbol de la estructura de un sitio web
Identificar las páginas (pestañas) que se quiere incluir en el menú de
navegación. Es decir los títulos de las páginas, su jerarquía y orden.
Paso 2: Hacer estructura de un sitio web.
Al crear las páginas de tu web, lo que estás creando son diferentes URLs o
“direcciones” dentro de la misma, partiendo de un dominio común. Cada nueva
página creada tendrá su dirección (URL) única e irá detrás del dominio.

Paso 3: Enlaces internos para mejorar la estructura de un sitio web

Los enlaces internos son el colofón para hacer una estructura casi perfecta. La
estructura de tu sitio web no lo podría ser sin ellos. Se trata de conectar todas
las páginas entre sí de forma que mejore la navegabilidad y la experiencia del
usuario, o sea, la usabilidad.