Diseño y maquetación
de sitios web
Wilfredo Jordan
El Alto, 6 de septiembre de 2014
wilofm@gmail.com
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
Dominio
Extensión: indican la orientación
geográfica del sitio y tipo de
organización o fin.
www.facebook.com
www.gregorias.org.bo
www.elalto.gob.bo
Nombre: marca
www.facebook.com
www.gregorias.org.
bo
www.elalto.gob.bo
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 sitio
Logo
Buscador
Publicidad
Información de contexto
Redes sociales
Fuente: Javier Casares http://www.javiercasares.com
Navegación
Menús
Enlaces a ciertos contenidos destacados
Mó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

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

  • 1.
    Diseño y maquetación desitios web Wilfredo Jordan El Alto, 6 de septiembre de 2014 wilofm@gmail.com
  • 2.
    Definición del proyectoweb 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.
  • 3.
    Clave “La clave esno 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
  • 4.
  • 5.
    Conceptos básicos Dominio. Unconjunto 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
  • 6.
    Dominio Extensión: indican laorientación geográfica del sitio y tipo de organización o fin. www.facebook.com www.gregorias.org.bo www.elalto.gob.bo Nombre: marca www.facebook.com www.gregorias.org. bo www.elalto.gob.bo
  • 7.
    Extensiones geográficas Delimitan paíso 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
  • 8.
    Extensiones genéricas Hacen referenciaal 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.
  • 9.
    Combinaciones De la combinaciónde extensiones nacen dominios como: www.presidencia.gob.bo www.gregorias.org.bo www.umsa.edu.bo
  • 10.
    Dominio Se pagan anualmente. Sepuede 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.
  • 11.
    Hosting El Hosting esel 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.
  • 12.
    CMS Sistema de gestiónde 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
  • 13.
    CMS El sistema permitemanejar 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.
  • 16.
    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.
  • 27.
    Cómo elegir unCMS Definir necesidades Mirar mercado (oferta) Mirar comunidad
  • 28.
    Índice (mapa) desitio 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.
  • 32.
    Maquetación La forma enque 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.
  • 33.
    Las investigaciones deEyetrack (‘rastreo’ o ‘seguimiento’ de ojo’)
  • 34.
    El patrón enF El patrón en F, advierte Jakob Nielsen, algunas veces adquiere la forma de E. Las flechas indican la trayectoria
  • 35.
    Estructura de unsitio 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/
  • 36.
    Cabecera Nombre del sitio Logo Buscador Publicidad Informaciónde contexto Redes sociales Fuente: Javier Casares http://www.javiercasares.com
  • 37.
    Navegación Menús Enlaces a ciertoscontenidos destacados Mó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
  • 38.
    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
  • 39.
    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
  • 40.
  • 42.
  • 43.
    Estrategia de palabrasclave 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
  • 45.
    Taller -Describir el proyectoweb 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.
  • 46.