Post on 10-Jul-2016
description
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