UNIDAD I. FUNDAMENTOS DE SITIOS WEB

DESARROLLO DE APLICACIONES WEB

MCE Ana María Felipe Redondo

Mayo 2016

UNIDAD 1. FUNDAMENTOS DE SITIOS WEB

Objetivo:

El alumno desarrollará un sitio web a través de una metodología y el lenguaje XHTML para su publicación.

CONTENIDO

1. Entorno de las aplicaciones Web (Internet, Intranet y Extranet)

2. Metodología de desarrollo y publicación de un Sitio Web

3. Lenguaje XHTML

ENTORNO DE LAS APLICACIONES WEB (INTERNET, INTRANET Y EXTRANET)

CONCEPTOS BÁSICOS

Navegador

Buscador

Sitio web

Portal

Página web

Hospedaje web

Sitio vertical

Sitio horizontal

XAMPP

localhost

127.0.0.1

Tipos de servidores

Accesibilidad

Usabilidad

Mapa web

Maquetador

wireframes

Browser

Hosting

Palabras clave (keywords)

Servidor

Cliente

Internet

Extranet

Intranet

EVOLUCIÓN DE APLICACIONES WEB

Evolución

de las

aplicaciones

web

Una aplicación web son aquellas

herramientas que los usuarios pueden

utilizar accediendo a un servidor web a

través de Internet

Uso de frameset o

marcos

Se creaban de forma fija

Poca actualización

Botones gif, resolución

de 88 * 31 px

Páginas

estáticas

https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Web 1.0 (1990-2000)

Navegadores en su forma básica

Sólo texto, Sólo lectura

HTML

EVOLUCIÓN DE APLICACIONES WEB

Evolución

de las

aplicaciones

web

XML – PHP –RSS

ASP – JSON

SEARCH – TAG

COLLABORATE

READ -WRITE

Redes Sociales

Aplicaciones web

2,0

Entornos para

compartirAulas virtuales

Web 2.0

2000 - 2010

Comparte información

Interoperabilidad

Diseño centrado en el

usuario

EVOLUCIÓN DE APLICACIONES WEB

Evolución

de las

aplicaciones

web

RDF – XHTML

RDFS – OWL

PERSONALIZATION

KNOWLEDGE

READ – WRITE

UNDERSTAND

Evolución 3D

Base de datos

Web 3.0

2010 - 2020

Interacción y contenidos

personalizadosWeb Semántica

Inteligencia

artificial

EVOLUCIÓN DE APLICACIONES WEB

Evolución

de las

aplicaciones

webWeb 4.0

2020 - 2030

Aplicaciones en la nube

Pasaremos de una

red”tonta” a una red

“inteligente”

ARQUITECTURA DE UNA APLICACIÓN WEB

ARQUITECTURA DE UNA APLICACIÓN WEB

Modelo Cliente -

Servidor

El servidor ejecuta, no el cliente

Cuando el cliente ejecuta un script,

no puede usar recursos del servidor

Un servlet se ejecuta en el servidor

Un applet se ejecuta en el navegador

ARQUITECTURA DE UNA APLICACIÓN WEB

INTRANET, INTRANET E INTERNET

INTRANET, INTRANET E INTERNET

METODOLOGÍA DE DESARROLLO WEB

METODOLOGÍA DE DESARROLLO WEB

MAPA DE CONTENIDOS

Es la organización lógica y estructurada de los contenidos que se van a presentar en el sitio web y no necesariamente guarda la misma estructura.

MAPA DE NAVEGACIÓN

Es una representación esquemática de la estructura del hipertexto, indicando los principales conceptos incluidos en el espacio de la información y las interrelaciones que existen entre ellos.

Elaborar un sitio web es importante porque ofrece un visión del orden de presentación de las pantallas con los contenidos (páginas web) la flexibilidad de moverse entre ellas (hipervínculos).

DISEÑO DEL MAPA DE NAVEGACIÓN

Seleccionar la pantalla de entrada al sitio web (index.html)

Ordenar de forma generalizada las pantallas con los contenidos (niveles o categorías)

Establecer los vínculos entre pantallas, permitiendo una navegación hipertextual.

MAPA DE NAVEGACIÓN

MAPA DE NAVEGACIÓN

Algo muy habitual en los equipos de desarrollo Web es dibujar maquetas de las pantallas de las aplicaciones y sus elementos, de forma que podamos transmitir mejor la idea de lo que queremos a los programadores que lo van a implementar. Esto es válido también para los clientes, que a veces no se hacen una idea de lo que les estamos contando si no lo ven dibujado.

Este tipo de croquis o prototipos pintados a mano de las Webs (llamados generalmente wireframes) son muy útiles, pero hacerlos realmente a mano es problemático porque no suelen quedar muy bien y luego muchas veces ni siquiera se hacen. Una herramienta especializada viene de maravilla para hacerlo mejor, más rápido y que quede de manera presentable.

MAPA DE NAVEGACIÓN

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx

DISEÑO DE INTERFACES

http://www.cobianmedia.com/2013/11/20/9-herramientas-para-crear-maquetas-interactivas-2/

Mockflow