DISEÑO Y MAQUETACIÓN
¿QUÉ ES UN SITIO WEB?
 Un sitio web o website, es un conjunto de páginas
web, más o menos extenso, agrupadas bajo un
domi...
LA TEMÁTICA DEL SITIO.
 La idea de crear un sitio web nace porque tenemos
algo que comunicar con el mundo.
 El tema debe...
ORGANIZAR ARCHIVOS.
 El sitio web se encuentra alojado en un servidor, que no
es más que un ordenador conectado a interne...
ORGANIZAR ARCHIVOS.
 Si tenemos secciones claramente definidas,
podemos guardar sus páginas en subcarpetas.
NAVEGACIÓN.
 El usuario debe de ser capaz de moverse de forma
intuitiva por nuestro sitio sin perderse, para ello:
 Debe...
ESTRUCTURA DEL MENÚ.
 Un menú no es más que una lista de enlaces
relativos a nuestro sitio, llamados elementos del
menú.
...
ESTRUCTURA DEL MENÚ.
 En lo que se refiere al código, el menú suele tener
estos elementos:
 Los menús se suelen basar en...
ESTRUCTURA DE LA PÁGINA.
 Como norma general todas las páginas
mantendrán la misma estructura.
 Una excepción a esto pue...
ESTRUCTURA DE LA PÁGINA.
UN BUEN DISEÑO
 Pero ¿qué es un buen diseño web? Bueno, este
punto puede dar para mucho.
 Comodidad para el visitante.
...
COLORES.
 La elección de colores apropiados es una de las
cosas que más influyen en el aspecto del sitio.
 Atractiva.
 ...
TEXTO Y FONDO
 Estos son puntos a destacar para el texto de una
página web:
 Tipo de fuente.
 Tamaño de la fuente.
 Co...
MAQUETACIÓN.
 La maquetación es la distribución de los elementos
en nuestra página.
 La maquetación de las páginas web s...
TAMAÑO.
 Cualquier elemento HTML de bloque, tiene dos
atributos que pueden definir su tamaño: ancho
(width) y alto (heigh...
TAMAÑO.
DESBORDAMIENTO.
 ¿qué pasa si el contenido del elemento (texto,
imágenes, etc...) no cabe? Entonces se produce un
desbord...
POSICIONAMIENTO.
 Utilizando CSS, con la propiedad position podemos
cambiar el tipo de posicionamiento de los elementos.
...
Próxima SlideShare
Cargando en…5
×

Diseño y Maquetacion

378 visualizaciones

Publicado el

maquetacion

Publicado en: Ingeniería
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
378
En SlideShare
0
De insertados
0
Número de insertados
43
Acciones
Compartido
0
Descargas
6
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Diseño y Maquetacion

  1. 1. DISEÑO Y MAQUETACIÓN
  2. 2. ¿QUÉ ES UN SITIO WEB?  Un sitio web o website, es un conjunto de páginas web, más o menos extenso, agrupadas bajo un dominio.  Cada sitio tiene una URL única que nos permite acceder a él.
  3. 3. LA TEMÁTICA DEL SITIO.  La idea de crear un sitio web nace porque tenemos algo que comunicar con el mundo.  El tema debe de ser , atractivo y que se domine.  El tema elegido determinará el diseño de la página.
  4. 4. ORGANIZAR ARCHIVOS.  El sitio web se encuentra alojado en un servidor, que no es más que un ordenador conectado a internet, capaz de "dar" archivos a quien se lo solicita.  En la raíz del sitio, tendremos como mínimo la página de inicio, a la que llamaremos index.html (o .htm).  Esto se debe a que cuando a un navegador le indicamos que abra una carpeta, busca el archivo index de la misma.  Organizaremos los tipos de archivo en carpetas.
  5. 5. ORGANIZAR ARCHIVOS.  Si tenemos secciones claramente definidas, podemos guardar sus páginas en subcarpetas.
  6. 6. NAVEGACIÓN.  El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello:  Debe de saber dónde está.  Debe de saber dónde ha estado.  Debe de saber dónde puede ir.  Debe de poder seguir navegando.
  7. 7. ESTRUCTURA DEL MENÚ.  Un menú no es más que una lista de enlaces relativos a nuestro sitio, llamados elementos del menú.  Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o debajo de él.  El menú no debe de ser demasiado extenso.  Normalmente, aparecerán las secciones de nuestro sitio web.  Los elementos del menú deben de ser descriptivos  El menú debe de ser ligero, y no ocupar demasiado espacio.
  8. 8. ESTRUCTURA DEL MENÚ.  En lo que se refiere al código, el menú suele tener estos elementos:  Los menús se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista, colocaremos un enlace. Si no sabes qué son las listas, puedes verlo en este básico .  El aspecto del menú se consigue por CSS.  Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos avanzados, o en vez de los enlaces.
  9. 9. ESTRUCTURA DE LA PÁGINA.  Como norma general todas las páginas mantendrán la misma estructura.  Una excepción a esto puede ser la página de inicio. Ejemplo:  Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación.  Un menú.  Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.  El pie.
  10. 10. ESTRUCTURA DE LA PÁGINA.
  11. 11. UN BUEN DISEÑO  Pero ¿qué es un buen diseño web? Bueno, este punto puede dar para mucho.  Comodidad para el visitante.  Comodidad para el autor.  Accesibilidad.  Usabilidad.  Transmitir.  Bonito y original.  Simple
  12. 12. COLORES.  La elección de colores apropiados es una de las cosas que más influyen en el aspecto del sitio.  Atractiva.  Decorativa.  Organización.
  13. 13. TEXTO Y FONDO  Estos son puntos a destacar para el texto de una página web:  Tipo de fuente.  Tamaño de la fuente.  Color del texto.  Espacios.  Alineación.  Y el fondo:  El fondo del texto debe de tener un buen contraste.  Evitar utilizar imágenes que puedan dificultar la lectura.
  14. 14. MAQUETACIÓN.  La maquetación es la distribución de los elementos en nuestra página.  La maquetación de las páginas web se realizaba utilizando tablas (<table>).  La maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>).  Las capas pueden estar anidadas unas dentro de otra.
  15. 15. TAMAÑO.  Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).  Los valores para estas medidas, pueden ser expresados en las medidas habituales:  Tamaños absolutos, utilizando px, cm, etc...  Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).  Tamaños relativos a la fuente, utilizando em.  El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.
  16. 16. TAMAÑO.
  17. 17. DESBORDAMIENTO.  ¿qué pasa si el contenido del elemento (texto, imágenes, etc...) no cabe? Entonces se produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores:  visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuación.  hidden. Lo que no quepa en el elemento, queda oculto.  auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.  scroll. Siempre muestra las barras de desplazamiento.
  18. 18. POSICIONAMIENTO.  Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:  static. Es el normal.  relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.  absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene.  fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.

×