46
Diseño y maquetación de sitios web Wilfredo Jordan El Alto, 6 de septiembre de 2014 [email protected]

Diseño y maquetación de sitios web.ppt

Embed Size (px)

Citation preview

Diseño y maquetaciónde sitios web

Wilfredo JordanEl Alto, 6 de septiembre de 2014

[email protected]

Definición del proyecto web

Finalidad del proyecto. Objetivo, contexto, valor = Tipo de

proyecto (tienda virtual, periódico).

Público. Edad, lugar, idioma, género.

Competencia. Ranking, contenidos, temas, actualización.

Equipo. Coordinador, desarrollador web, diseñador web,

community manager, generador de contenidos.

Clave

“La clave es no duplicar lo que está disponible en otros medios. Los únicos

proyectos que van a sobrevivir a largo plazo son los originales, no los que

hacen el copy-paste”.

Sandra Crucianelli

Estructura y composición de un sitio

Conceptos básicos

Dominio. Un conjunto de caracteres alfanuméricos que conforman un nombre

único el cual está ligado y define a un sitio web.

-Nombre del dominio

-Extensión del dominio

Extensiones geográficas

Delimitan país o región. Actualmente existen 243 y lleva dos palabras que

corresponden a la abreviación del nombre del país:

.es - España .co- Colombia .eu - Europa

.mx - Mexico .cl - Chile .us - Estados

Unidos

.ar - Argentina .pe - Peru .br - Brasil

.ve- Venezuela .in - India .bo - Bolivia

Extensiones genéricas

Hacen referencia al tipo de actividad o información que ofrece el sitio web.

.com = comercio

.net = redes, internet.

.org = organizaciones

.gob = Entidades públicas.

.info = Información

.edu= Universidades, educación.

Combinaciones

De la combinación de extensiones nacen dominios como:

www.presidencia.gob.bo

www.gregorias.org.bo

www.umsa.edu.bo

Dominio

Se pagan anualmente.

Se puede consultar la disponibilidad de un dominio en:

http://www.dominioslibres.info/

En Bolivia se compra de www.nic.bo

El costo oscila entre 70 y 1200 bs.

Hosting

El Hosting es el servicio de alojamiento de paginas web y de cada uno de sus

componentes. Es muy similar a rentar el local en una plaza comercial, pero a

nivel mundial.

CMS

Sistema de gestión de contenidos. Es un programa desarrollado para que

cualquier usuario pueda administrar y gestionar contenidos de una web con

facilidad y sin conocimientos de programación Web.

Front end, lo que se mira

Backend, lo que no se mira

CMS

El sistema permite manejar de manera independiente el contenido y el diseño.

Así, es posible manejar el contenido y darle en cualquier momento un diseño

distinto al sitio web sin tener que darle formato al contenido de nuevo, además

de permitir la fácil y controlada publicación en el sitio a varios editores.

Clasificación de CMS

Propietarios. Herramientas creadas a medida para actualizar una página web

No propietarios. Sistemas desarrollado por empresas o instituciones que

están disponibles para ser utilizados. Son, en muchos de los casos,

completamente configurables, sirven para producir cualquier tipo de web con

cualquier clasificación de secciones y contenidos.

Cómo elegir un CMS

Definir necesidades

Mirar mercado (oferta)

Mirar comunidad

Índice (mapa) de sitio

Un mapa de sitio web es una lista de las páginas de un sitio web accesibles

para los buscadores y usuarios.

• Puede ser un documento en cualquier formato usado como herramienta de

planificación para el diseño o una página que lista las páginas de una web (ya

realizada), organizadas comúnmente de forma jerárquica.

Maquetación

La forma en que se organiza la información.

Donde están los textos, imágenes y enlaces.

Se debe tener en cuenta información sobre patrones de visualización de los

usuarios.

Las investigaciones de Eyetrack (‘rastreo’ o ‘seguimiento’ de ojo’)

El patrón en F

El patrón en F, advierte Jakob Nielsen, algunas veces

adquiere la forma de E. Las flechas indican la trayectoria

Estructura de un sitio web

• Zona 1: Cabecera

• Zonas 2 y 4: Navegación

• Zona 3: Contenido

• Zona 4: Pie de página

• Fuente: Javier Casares http://www.javiercasares.com/

Cabecera

Nombre del sitioLogoBuscadorPublicidad Información de contextoRedes sociales

Fuente: Javier Casares http://www.javiercasares.com

Navegación

Menús Enlaces a ciertos contenidos destacadosMódulos (Galerías de imagen, videos, audios, comentarios, noticias recientes, lo más popular, publicidad, hemerotecas, baners, )Widgets de redes sociales.Servicios (clima, clasificados, guías, etc.)

Fuente: Javier Casares http://www.javiercasares.com

Contenido

• Diarios digitales: Noticias (formato multimedia,

• Sitio web institucional: Noticias, documentos, actividades, convocatorias).

• Sitio web de Universidad: Oferta académica

• Fuente: Javier Casares http://www.javiercasares.com

Pie de página

• Enlaces a datos legales correspondientes a cada país.

• Servicios

• Mapas de sitios

• Logos de apoyos o patrocinios

• Dirección de contacto

• Créditos

• Términos y condiciones

• Fuente: Javier Casares http://www.javiercasares.com

Ejemplos

Plantillas

Estrategia de palabras clave

Son palabras o frases que Google y otros motores de búsqueda priorizan para

posicionarlo en los primeros sitios de su ranking.

En un comienzo debe ser genérica y puede incluir temas, productos, nombres.

Puede combinar palabras clave

Taller

-Describir el proyecto web incluyendo nombre, tipo, público y competencia.

-Proponer dominio y CMS para el proyecto.

-Entregar un índice de contenidos (mapa de sitio).

-Maqueta del sitio web.

-Lista de palabras clave.

Muchas Gracias!

@wilofm