Introduccion Al Diseño Web

Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a INTRODUCCIÓN AL DISEÑO WEB
José Antonio Serrano Garcı́a
Asociación de la Prensa de Granada
15 de junio de 2012
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Por donde
comenzar
Comenzar
Parte I
Fases
INTRODUCCIÓN AL DISEÑO WEB

Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Por donde
comenzar
Comenzar
Fases
1 Por donde comenzar
Comenzar
Fases
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Por donde
comenzar
Comenzar
Fases
1 Por donde comenzar
Comenzar
Fases
Por donde comenzar
Diseño de
Paginas Web -
HTML Básico Es un proceso reiterado y recursivo, no una secuencia rı́gida
José Antonio
Serrano Garcı́a
Por donde
comenzar
Comenzar
Fases
Fases
Diseño de
Paginas Web - 1 Fase de Análisis:
HTML Básico
José Antonio
1 Identifica las necesidades del cliente
Serrano Garcı́a 2 Identificar las audiencias
3 Conceptualizar el negocio
Por donde
comenzar 4 Desarrollar un sitemap
Comenzar
Fases 2 Fase de Diseño:
Desarrollo de un prototipo fotográfico
3 Fase de Desarrollo:
Uso de HTML
CSS
imágenes
...
4 Fase de Lanzamiento:
Testeo
Depuración
Entrenamiento en la administración
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Objetivo
La información
La estructura
Parte II
La audiencia
Elementos
recomendados
Definición de la
finalidad
Descripción del
sitio
Fase de Análisis
Contenido
Problemas de
comunicación
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
2 Objetivo
Objetivo
La información
La información
La estructura
La audiencia
La estructura
Elementos
recomendados La audiencia
Definición de la
finalidad Elementos recomendados
Descripción del
sitio
Contenido
Definición de la finalidad
Problemas de
comunicación Descripción del sitio
Contenido
Problemas de comunicación
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
2 Objetivo
Objetivo
La información
La información
La estructura
La audiencia
La estructura
Elementos
recomendados La audiencia
Definición de la
finalidad Elementos recomendados
Descripción del
sitio
Contenido
Problemas de
comunicación Descripción del sitio
Contenido
Objetivo
Diseño de
Paginas Web -
HTML Básico
José Antonio ¿Para qué quiere el cliente un sitio web?

Serrano Garcı́a
Dar a conocer sus productos
Objetivo
La información Realizar ventas
La estructura
La audiencia
Elementos
Ofrecer apoyo a clientes
recomendados
Definición de la
finalidad
Información general
Descripción del
sitio
Contenido
Portal de noticias
Problemas de
comunicación Promocionar un evento/actividad en particular
¿Qué se va a permitir hacer en la web?

La información
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Objetivo
La información
La estructura ¿Cómo se debe categorizar?
La audiencia
Elementos
recomendados
Definición de la ¿Qué desea incluir el cliente y qué puede aportar?
finalidad
Descripción del
sitio
Contenido
¿Qué lo diferencia de la competencia?
Problemas de
comunicación
La estructura
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Objetivo
La información
La estructura Esquema uniforme de todas las páginas
La audiencia
Elementos
recomendados
Definición de la Sin subsecciones aparte
finalidad
Descripción del
sitio
Contenido
Regla de los tres click
Problemas de
comunicación
La audiencia
Diseño de
Paginas Web -
HTML Básico
¿Quién es el destinatario del sitio?
José Antonio
Serrano Garcı́a Capacidad técnica
Objetivo
La información
Capacidad fı́sica
La estructura
La audiencia
Elementos Localización geográfica
recomendados
Definición de la
finalidad
Descripción del Datos estadı́sticos, como edad, sexo, hábitos de consumo,
sitio
Contenido etc.
Problemas de
comunicación
Si hay un perfil determinado, centrarnos en él
Adaptar estética general, colores, navegabilidad. . .
Perfiles técnicos: velocidad de conexión, programas,

navegadores. . .
Elementos recomendados
Diseño de
Paginas Web -
HTML Básico
José Antonio
Sección de contactos: fax, teléfono, formularios. . .
Serrano Garcı́a
Información clara sobre lo que se puede hacer
Objetivo
La información
La estructura Barras de navegación comunes y del mismo tipo
La audiencia
Elementos
recomendados
Definición de la Tı́tulos de página descriptivos
finalidad
Descripción del
sitio
Contenido Mapa del sitio
Problemas de
comunicación
Menús textuales a pie de página
Polı́tica de privacidad
Términos de uso
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a Imagen coherente de la empresa:
Cómo se describe el mismo
Objetivo
La información Cómo lo ven otros
La estructura
La audiencia
Cómo piensan que lo ven
Elementos
recomendados
Definición de la
Web para tener presencia en Internet
finalidad
Descripción del
sitio
Web para eventos temporales
Contenido
Problemas de Contenidos fijos o actualizables
comunicación
Contenidos multimedia
Acceso rápido a la información
Cuestionarios
Descripción del sitio
Diseño de
Paginas Web -
HTML Básico
José Antonio Descripción del sitio y sus intenciones de forma breve y bien
Serrano Garcı́a
definida.
Objetivo
La información Análisis de los objetivos y adecuación a los recursos
La estructura
La audiencia
Elementos
“Es un sitio web para dar publicidad y hacer ventas online de
recomendados
Definición de la los productos y servicios de la empresa, que se actualizará con
finalidad
Descripción del
sitio
las últimas novedades.
Contenido
Problemas de
comunicación
El sitio será interactivo con un forum donde los usuarios podrán
intercambiar sus experiencias y ponerse en contacto
directamente con representantes de la empresa para hacer
pedidos, sugerencias y comentarios”
Contenido
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Sin un buen contenido, el sitio no tendrá visitantes.
Objetivo
La información
La estructura Énfasis en el mensaje:
La audiencia
Elementos
recomendados
Definición de la Función referencial: sucesos reales, no tiene opinión.
finalidad
Descripción del
sitio
Contenido Función cognitiva: ordenan, interrogan al receptor.
Problemas de
comunicación
Función coloquial: invita a intervenir. Lenguaje coloquial
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Objetivo
La información
Ruido: exceso de información, imágenes colores.
La estructura
La audiencia
Elementos Redundancia: repetición innecesaria de elementos, colores
recomendados
Definición de la
finalidad
y formas
Descripción del
sitio
Contenido Obsolescencia: Utilización de tecnologı́a obsoleta o usar
Problemas de
comunicación modismos que no incluyen la globalización.
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Diseño
Anatomı́a de
Parte III
una pagina web
Anatomı́a web
Mapa del Sitio
Barra y Botones
de Navegación
MOCKUPS
Prototipo
FASE DE DISEÑO
Accesibilidad
Usabilidad
Reglas Generales
Reglas de
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos
multimedia
Diseño de
Paginas Web -
HTML Básico 3 Fase de Diseño
José Antonio Anatomı́a de una pagina web
Serrano Garcı́a
Anatomı́a web
Fase de
Diseño
Mapa del Sitio
Anatomı́a de
una pagina web
Barra y Botones de Navegación
Anatomı́a web
Mapa del Sitio
MOCKUPS
Barra y Botones
de Navegación Prototipo
MOCKUPS
Prototipo Accesibilidad
Accesibilidad
Usabilidad Usabilidad
Reglas Generales
Reglas de Reglas Generales
Identidad e
Información
Diagramación de
Reglas de Identidad e Información
la pagina
Estructura y
Diagramación de la pagina
navegación
Elementos Estructura y navegación
multimedia
Elementos multimedia
Diseño de
Paginas Web -
HTML Básico 3 Fase de Diseño
José Antonio Anatomı́a de una pagina web
Serrano Garcı́a
Anatomı́a web
Fase de
Diseño
Mapa del Sitio
Anatomı́a de
una pagina web
Barra y Botones de Navegación
Anatomı́a web
Mapa del Sitio
MOCKUPS
Barra y Botones
de Navegación Prototipo
MOCKUPS
Prototipo Accesibilidad
Accesibilidad
Usabilidad Usabilidad
Reglas Generales
Reglas de Reglas Generales
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos Estructura y navegación
multimedia
Anatomı́a de una pagina web
Diseño de
Paginas Web -
HTML Básico
José Antonio Bloque contenedor: plantilla que contiene toda la página

Serrano Garcı́a
web. Anchura expansible o fija.
Fase de
Diseño Bloque de identidad: logotipos, marcas y colores
Anatomı́a de
una pagina web asociados a la compañı́a.
Anatomı́a web
Mapa del Sitio
Barra y Botones
Bloque de navegación: Situado en un lugar visible y
de Navegación
MOCKUPS
constante.
Prototipo
Accesibilidad Bloque de contenido: Debe situarse en el centro de
Usabilidad
Reglas Generales atención del usuario. El contenido es esencial
Reglas de
Identidad e
Información Bloque de pie de página: copyright, contacto,
Diagramación de
la pagina
Estructura y
información legal, vı́nculos a secciones principales.
navegación
Elementos
multimedia
Espacios en blanco: aportan claridad, equilibrio y unidad
Anatomı́a Web
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a No sobrecargar la página
Fase de Eliminar elementos innecesarios
Diseño
Anatomı́a de
una pagina web
Evitar el uso excesivo de fuentes. Sencillez = elegancia
Anatomı́a web
Mapa del Sitio Las animaciones innecesarias aumentan el tiempo de
Barra y Botones
de Navegación
MOCKUPS
descarga
Prototipo
Accesibilidad Inspiración en imágenes,colores,diseños,fuentes y códigos
Usabilidad
Reglas Generales
Reglas de
Visita a la competencia
Identidad e
Información
Diagramación de
Ubica los elementos atractivos en la mitad superior
la pagina
Estructura y
navegación
Textos no muy extensos.Dos o tres pantallas
Elementos
multimedia
Mapa del Sitio I
Diseño de
Paginas Web - Arquitectura de la información:
HTML Básico
José Antonio Organización y estructura de la información

Serrano Garcı́a
Categorizar, etiquetar para tener un contenido accesible
Fase de
Diseño Aparecen todas las páginas del sitio y sus enlaces
Anatomı́a de
una pagina web Define las categorı́as y los niveles importantes
Anatomı́a web
Mapa del Sitio
Barra y Botones
Niveles altos ⇒ información clara y concisa
de Navegación
MOCKUPS
Prototipo
Niveles bajos ⇒ información detallada
Accesibilidad
Usabilidad Entre 3 y 6 categorı́as de nombre corto:
Reglas Generales
Reglas de
Identidad e
Productos
Información
Diagramación de
la pagina
servicios
Estructura y
navegación
Elementos
Contactos
multimedia
Quienes somos
...
Mapa del Sitio II
Diseño de
Paginas Web -
HTML Básico
José Antonio Mapa del sitio

Serrano Garcı́a
Fase de
1 Enumere todos los temas importantes y agrupar por
Diseño
Anatomı́a de
categorı́as.
una pagina web
Anatomı́a web 2 Defina las páginas que va a tener el sitio, ubicándolas por
Mapa del Sitio
Barra y Botones
de Navegación
categorı́as.
MOCKUPS
Prototipo 3 Cada página no sobrepasa la longitud de dos o tres
Accesibilidad
Usabilidad pantallas con los temas bien diferenciados.
Reglas Generales
Reglas de
Identidad e
4 Defina un esquema de navegación basado en la
Información
Diagramación de
la pagina
importancia de la información dentro del sitio, priorizando
Estructura y
navegación
los contenidos que se van a visualizar primero.
Elementos
multimedia
Mapa del Sitio III
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Diseño
Anatomı́a de
una pagina web
Anatomı́a web
Mapa del Sitio
Barra y Botones
de Navegación
MOCKUPS
Prototipo
Accesibilidad
Usabilidad
Reglas Generales
Reglas de
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos
multimedia
Barra y Botones de Navegación I
Diseño de
Paginas Web - Es la principal herramienta para desplazarse por el sitio
HTML Básico
José Antonio Estructura clara

Serrano Garcı́a
Botones en el mismo formato y orden
Fase de
Diseño Categorı́as más importantes primero
Anatomı́a de
una pagina web
Anatomı́a web
Navegación secundaria no preponderante
Mapa del Sitio
Barra y Botones Separar visualmente los enlaces
de Navegación
MOCKUPS
Prototipo
Permitir navegar al home
Accesibilidad
Usabilidad Visualizar la ruta completa
Reglas Generales
Reglas de
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos
multimedia
Barra y Botones de Navegación II
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de Un wireframe es una

Diseño
Anatomı́a de representación esquemática de
una pagina web
Anatomı́a web una página Web, sin elementos
Mapa del Sitio
Barra y Botones
de Navegación
gráficos que muestren
MOCKUPS
Prototipo
contenidos.
Accesibilidad
Usabilidad
Reglas Generales
Comunicación entre
Reglas de
Identidad e
programadores, diseñadores y
Información
Diagramación de clientes
la pagina
Estructura y
navegación
Elementos
multimedia
MOCKUPS
Diseño de
Paginas Web -
Son elementos muy cercanos al diseño del sitio final e incluyen
HTML Básico todo el material gráfico, la tipografı́a, y otros elementos de
José Antonio
Serrano Garcı́a
página.
Fase de
Diseño
Anatomı́a de
una pagina web
Anatomı́a web
Mapa del Sitio
Barra y Botones
de Navegación
MOCKUPS
Prototipo
Accesibilidad
Usabilidad
Reglas Generales
Reglas de
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos
multimedia
http://techtastico.com/post/mockups-online/
Prototipo
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Diseño
Diseños semi-funcionales que sirve para dar una vista
Anatomı́a de
una pagina web previa más real del sitio en construcción.
Anatomı́a web
Mapa del Sitio
Barra y Botones
de Navegación
Interfaz de usuario casi definitiva y se construye
MOCKUPS
Prototipo
generalmente con HTML / CSS
Accesibilidad
Usabilidad
Reglas Generales Programación de la lógica de negocio del sitio
Reglas de
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos
multimedia
Accesibilidad I
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a Acceso universal independientemente del tipo de hardware,
Fase de software, infraestructura de red, idioma, cultura,
Diseño
Anatomı́a de
localización geográfica y capacidades de los usuarios
una pagina web
Anatomı́a web
Mapa del Sitio
Barra y Botones
Capacidades técnicas: Ya sean navegadores (Firefox, IE,
de Navegación
MOCKUPS
Opera, Chrome, Safari. . . ),tecnologı́as (flash, javascript,
Prototipo
Accesibilidad
quicktime. . . ), etc.
Usabilidad
Reglas Generales
Reglas de
Identidad e
Capacidades fı́sicas: Ya sean problemas de audición
Información
Diagramación de
(personas con deficiencias de oı́do), visuales (personas
la pagina
Estructura y ciegas o con incapacidad visual), etc.
navegación
Elementos
multimedia
Accesibilidad II
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Diseño
Anatomı́a de
una pagina web
Anatomı́a web
Mapa del Sitio
Barra y Botones
de Navegación
MOCKUPS
Prototipo
Accesibilidad
Usabilidad
Reglas Generales
Reglas de
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos
multimedia
Usabilidad I
Diseño de
Paginas Web -
HTML Básico
José Antonio
Estudia la forma de diseñar sitios Web para que los usuarios
Serrano Garcı́a puedan interactuar con ellos de la forma más fácil,cómoda e
Fase de intuitiva posible.
Diseño
Anatomı́a de
una pagina web Beneficios:
Anatomı́a web
Mapa del Sitio
Barra y Botones
Reducción de los costes de aprendizaje.
de Navegación
MOCKUPS Disminución de los costes de asistencia y ayuda al usuario.
Prototipo
Accesibilidad
Usabilidad
Optimización de los costes de diseño, rediseño y
Reglas Generales
Reglas de
mantenimiento de los sitios.
Identidad e
Información
Diagramación de
Aumento de la tasa de conversión de visitantes a clientes
la pagina
Estructura y del sitio web.
navegación
Elementos
multimedia Mejora la imagen y el prestigio del sitio web.
Usabilidad II
Diseño de
Paginas Web - Mejora la calidad de vida de los usuarios del sitio, ya que
HTML Básico
reduce su estrés, incrementa la satisfacción y la
José Antonio
Serrano Garcı́a productividad
Fase de
Diseño
Anatomı́a de
una pagina web
Anatomı́a web
Mapa del Sitio
Barra y Botones
de Navegación
MOCKUPS
Prototipo
Accesibilidad
Usabilidad
Reglas Generales
Reglas de
Identidad e
Información
Diagramación de
la pagina
Estructura y
navegación
Elementos
multimedia
Reglas Generales
Diseño de
Paginas Web -
HTML Básico
Regla de los 3 clics. el usuario debe encontrar la
José Antonio
Serrano Garcı́a información que esta buscando en 3 clics
Fase de
Regla de los 2 segundos. diseñar las páginas de tal
Diseño
Anatomı́a de
manera que se carguen rápidamente.Generalmente, si una
una pagina web
Anatomı́a web
página tarda más de dos segundos en cargar (para ciertas
Mapa del Sitio
Barra y Botones
respuestas del sistema), la mayorı́a de usuarios no la
de Navegación
MOCKUPS esperará.
Prototipo
Accesibilidad
Usabilidad
Principio del 80/20. Establece que el 80 % de las mejoras
Reglas Generales
Reglas de
pueden ser alcanzadas identificando al 20 % de los clientes.
Identidad e
Información
Diagramación de
Principio 7±2. Según los estudios de George A. Miller
la pagina
Estructura y nuestra memoria a corto plazo sólo puede retener entre 5 y
navegación
Elementos
multimedia
9 términos a la vez. De ahı́ que se utilice el 7 como valor
medio de opciones que debe contener un menú.
Diseño de
Paginas Web -
HTML Básico 1 Incluir la marca (logo) del sitio en cada página, y
José Antonio
Serrano Garcı́a ubicarlo preferentemente en la esquina superior izquierda.
Fase de
2 Calidad del contenido el contenido es la razón por la que
Diseño
Anatomı́a de
se conectan los usuarios y es su centro de atención. Se
una pagina web
Anatomı́a web
entiende por “calidad” a un contenido que satisface las
Mapa del Sitio
Barra y Botones
preguntas de usuario y que está orientado a dar respuestas
de Navegación
MOCKUPS útiles.
Prototipo
Accesibilidad
Usabilidad
3 Tı́tulos claros y diferentes para cada página, utilizando
Reglas Generales
Reglas de
los términos genéricos más usados para describir el
Identidad e
Información contenido de las mismas.
Diagramación de
la pagina
Estructura y
4 Escoger un dominio memorizable utilizando no más de
navegación
Elementos
multimedia
dos palabras. Una de ellas puede ser el nombre propio de
la empresa.
Diseño de
Paginas Web -
HTML Básico
1 Mantener la consistencia del sitio desde un punto de vista
José Antonio formal, el diseño del sitio debe ser coherente en todas las
Serrano Garcı́a
páginas.
Fase de
Diseño
2 No utilizar pantallas “splash” ni PopUps estas páginas
Anatomı́a de
una pagina web
servidas automáticamente,generalmente animadas, evitan
Anatomı́a web
Mapa del Sitio
que el usuario pueda acceder a la información de manera
Barra y Botones
de Navegación rápida.
MOCKUPS
Prototipo
Accesibilidad
3 Crear una jerarquı́a visual y establecer un recorrido.
Usabilidad
Reglas Generales
Utilizar las zonas de alta jerarquı́a informativa de la página
Reglas de
Identidad e para contenidos de mayor relevancia.
Información
Diagramación de
la pagina
4 Evitar el ruido visual y generar zonas “blancas” de
Estructura y
navegación descanso de la vista.
Elementos
multimedia
5 Controlar la longitud de la página para evitar generar
mucho scrolling
Estructura y navegación
Diseño de
Paginas Web -
HTML Básico 1 La barra de navegación principal debe ser visible, clara y lo
José Antonio
Serrano Garcı́a
más obvia posible.
Fase de
2 No utilizar el color empleado para los hipervı́nculos en
Diseño otros elementos como encabezados o palabras destacadas
Anatomı́a de
una pagina web
Anatomı́a web
en negrita.
Mapa del Sitio
Barra y Botones
3 Crear un mapa del sitio y activar un hipervı́nculo hacia él
de Navegación
MOCKUPS desde su página principal.
Prototipo
Accesibilidad
Usabilidad
4 Deben existir respuestas predecibles por parte del sistema
Reglas Generales
Reglas de para cada acción del usuario.
Identidad e
Información
Diagramación de
5 Evitar las páginas huérfanas y la redundancia de enlaces.
la pagina
Estructura y
navegación
6 colocar breadcrumbs o ’migas de pan’, indicándole dónde
Elementos
multimedia está y la relación jerárquica de ese nodo con el resto de la
estructura de la Web.
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
1 Optimizar el tamaño de las imágenes, si son muy pesadas
Fase de
Diseño
requieren demasiado ancho de banda y hacen que la
Anatomı́a de
una pagina web
página cargue muy lentamente.
Anatomı́a web
Mapa del Sitio 2 Evitar el uso de elementos que no añaden valor y crean
Barra y Botones
de Navegación
MOCKUPS
una apariencia poco profesional (contadores de visitas,
Prototipo
Accesibilidad
GIFs animados, publicidades, etc.)
Usabilidad
Reglas Generales 3 Minimizar el uso de la tecnologı́a Flash, por lo general
Reglas de
Identidad e
Información
tardan mucho en cargar y tienen problemas para ser
Diagramación de
la pagina indexadas.
Estructura y
navegación
Elementos
multimedia
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Desarrollo
Desarrollo
Parte IV
FASE DE DESARROLLO
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Desarrollo
Desarrollo
4 Fase de Desarrollo
Desarrollo
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Desarrollo
Desarrollo
4 Fase de Desarrollo
Desarrollo
Desarrollo
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
El Front-End es la parte del sitio que interactúa con los
Fase de
Desarrollo
usuarios. De una manera práctica, el front-end serı́a todos
Desarrollo esos formularios que rellenamos en las webs, las
aplicaciones que manejamos y todas esas cosas que tengan
que realizar los usuarios.
El Back-End es la parte que procesa la entrada de datos

que se efectuó desde el front-end es decir, son los procesos
que utiliza el administrador del sitio con sus respectivos
sistemas para resolver las peticiones de los usuarios.
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Lanzamiento
Preparación del
Parte V
ambiente de
producción
Publicación del
Sitio
Pruebas en
producción
FASE DE LANZAMIENTO
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Lanzamiento
Preparación del
ambiente de
producción
5 Fase de Lanzamiento
Publicación del
Sitio
Preparación del ambiente de producción
Pruebas en
producción Publicación del Sitio
Pruebas en producción
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Lanzamiento
Preparación del
ambiente de
producción
5 Fase de Lanzamiento
Publicación del
Sitio
Pruebas en
producción Publicación del Sitio
Diseño de
Paginas Web -
HTML Básico
José Antonio Lograr que se parezca lo más posible al ambiente de

Serrano Garcı́a
desarrollo/pruebas.
Fase de
Lanzamiento
Preparación del
Tareas:
ambiente de
producción
Publicación del
Configurar los servidores de DNS para que el dominio (o
Sitio
Pruebas en
dominios)
producción
Instalación y configuración de bases de datos
Configuraciones especiales en el servidor web
Revisión de servicios para envı́o de emails a través de los
formularios de contacto del sitio.
...
Publicación del Sitio
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Fase de
Lanzamiento
Copiamos los archivos del servidor de desarrollo al servidor
Preparación del
ambiente de
de producción.
producción
Publicación del
Sitio
Pruebas en
Publicar en horas de baja actividad
producción
Cambio de DNS
Elaboración de una página web temporal

Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Probar varias plataformas y navegadores como Internet
Fase de
Lanzamiento
Explorer, Firefox, Chrome y Safari.
Preparación del
ambiente de
producción Añadir Google Analytics (u otras herramientas web) en las
Publicación del
Sitio
Pruebas en
páginas para recoger estadı́sticas sobre el uso del sitio.
producción
Pruebas de destinatarios de correos
Formación del cliente para la gestión de la web
Verificar archivos multimedia

Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Licencia de
este
documento
Parte VI
Licencia
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Licencia de
este
documento
6 Licencia de este documento

Esta presentación tiene licencia BY-NC-SA.
Diseño de
Paginas Web -
HTML Básico
Esta licencia cuyo texto puedes obtener en:
José Antonio http://creativecommons.org/licenses/by-nc-sa/3.0/
Serrano Garcı́a
Licencia de
este
documento
José Antonio Serrano Garcı́a

Copyright (c) 2012
Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Contacto
Parte VII
Contacto
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Contacto
7 Contacto
Contacto
Diseño de
Paginas Web -
HTML Básico José Antonio Serrano Garcı́a
José Antonio Doctorando en Comunicación Audiovisual
Serrano Garcı́a
Máster en Información Cientı́fica.
Contacto
Licenciado en Comunicación Audiovisual.
Diplomado en Informática de Gestión.
Máster en Administración de la Prevención de Riesgos
Laborales.
Técnico Superior en Prevención de Riesgos Laborales.
Correo electrónico: cursos.fpo.granada@gmail.com
Currı́culum Vitae.
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a
Parte VIII
FIN
Diseño de
Paginas Web -
HTML Básico
José Antonio
Serrano Garcı́a

Introduccion Al Diseño Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion Al Diseño Web

Cargado por

Copyright:

Formatos disponibles

Diseño de

José Antonio Serrano Garcı́a

Asociación de la Prensa de Granada

INTRODUCCIÓN AL DISEÑO WEB

José Antonio ¿Para qué quiere el cliente un sitio web?

¿Qué se va a permitir hacer en la web?

Si hay un perfil determinado, centrarnos en él

Adaptar estética general, colores, navegabilidad. . .

Perfiles técnicos: velocidad de conexión, programas,

José Antonio Bloque contenedor: plantilla que contiene toda la página

José Antonio Organización y estructura de la información

José Antonio Mapa del sitio

José Antonio Estructura clara

Fase de Un wireframe es una

El Back-End es la parte que procesa la entrada de datos

José Antonio Lograr que se parezca lo más posible al ambiente de

Elaboración de una página web temporal

Pruebas de destinatarios de correos

Formación del cliente para la gestión de la web

Verificar archivos multimedia

6 Licencia de este documento

José Antonio Serrano Garcı́a

Este obra está bajo una licencia Creative Commons

También podría gustarte