Advertisement
  1. Web Design
  2. Skeleton

Crear la Estructura de la Página HTML con Skeleton

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called From PSD to HTML With the Skeleton Boilerplate.
Adding Styles to Our Skeleton Page Build

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image
What You'll Be Creating

En éste tutorial nos enfocaremos en codificar un maquetado PSD, usando el framework responsivo Skeleton. Hay muchísimos tutoriales sobre como codificar un diseño usando HTML y CSS, frecuentemente con un agregado de JavaScript, pero el propósito principal de éste tutorial es hacer las cosas utilizando la versión mas reciente del Skeleton framework (2.0.4). ¡Han habido algunas magníficas mejoras desde la última vez que lo cubrimos!

Antes que nada, dejame presentar a Skeleton, después nos adentraremos en la codificación.

¿Qué es el Skeleton Boilerplate?

Skeleton es el invento de Dave Gamache. Es una grilla fluída de 12 columnas, con una anchura máxima predeterminada de 960px, tipografía básica y estilos mínimos para elementos comunes HTML como botones, enlaces, casillas y áreas de texto.

Su fortaleza recae en el hecho que es un framework CSS ligero. En tan solo casi 400 líneas de código, Skeleton está diseñado para ser un punto de inicio, no un framework exhaustivo con todo el diseño UI como Bootstrap, Foundation o SemanticUI.

¿Por qué utilizar Skeleton?

Porque es sencillo de usar, y es un magnífico inicio para crear tus propios frameworks responsivos.

¿Y qué hay de nuevo?

Dave Gamache presentó y actualizó varias características en Skeleton v2.0:

Comenzando

Durante éste tutorial vamos a codificar el diseño mostrado arriba, hecho por Samir Timezguida. El recorrido comprenderá:

  1. Descargar Skeleton y escribir nuestro marcado HTML
  2. Jalar las imágenes del PSD y escribir el CSS
  3. Agregar un toque de JavaScript que añadirá interactividad

Comencemos por descargar el framework Skeleton de www.getskeleton.com y obtener el PSD de los archivos fuente.

Bosquejando y Planeando

Pudieras preferir un enfoque diferente, pero me gusta comenzar con bosquejar el maquetado para visualizar cada sección. Hay muchas secciones por todo el maquetado:

  • Hero
  • Introducción
  • Creatividad
  • Trabajo
  • Ayuda
  • Clientes
  • Sobre
  • Video
  • Por qué nosotros
  • Cita
  • Comuníquese
  • Contacto
  • Pie

Éste es el resultado de mi boceto para la estructura HTML deseada:

Secciones

Para cada sección haremos un contenedor que llenará el ancho de la ventana, con el nombre de la sección como su nombre de clase. Dentro de él aprovecharemos Skeleton al crear la grilla para hacer un contenedor  y un elemento contenedor de fila. El HTML para cada sección será una variante de ésto:

Ahora es momento de tomar cada sección y agregar el marcado. No te preocupes por los estilos, imágenes, fuentes, etc, por ahora nos concentraremos solamente en la estructura HTML.

Menú

Para el menú, necesitamos agregar el ícono de la "hamburguesa" y una lista desordenada llena de enlaces internos. Cada enlace apuntará a una sección específica.

Nota: el ojo alerta entre ustedes puede reconocer las clases fa fa-bars en el elemento <i> para el ícono de navegación. Éstos son típicos íconos de Font Awesome, que implementaremos mas adelante en el proceso.

Hero

La sección hero, como se ve en el PSD, comprende una imagen estirada, un título y un subtítulo. Para la imgen de fondo agregaremos un contenedor diferente, para el título usaremos h1 y para el subtítulo un h2. Aquí, ves, estoy usando u-full-width, la nueva clase utilitaria de skeleton.

Introduction

La introducción contiene dos elementos; un título y un subtítulo. Preparamos el html para soportar el borde del título, al agregar una clase separator, que añadirá border-bottom y algo de espacio.

Creativity

La creatividad tiene un fondo de todo el ancho y un botón. También puedes ver la clase centered en el h4; una clase utilitaria que crearemos en el próximo tutorial para ayudarnos a centrar elementos en los ejes vertical y horizontal.

Work

Ésta es la sección mas grande del sitio web y contiene dos filas adicionales; una para trabajar filtro enlaces y una para trabajar objetos.

Filtros work contiene una lista desordenada llena de enlaces que filtrarán los elementos work.

Los elementos work tendrán cuatro columnas de ancho, conteniendo la imagen work, el título work y la descripción work.

También pluedes ver que estoy usando otra clase utilitaria, vertical-centered, que centrará el elemento en el eje vertical. La descripción para cada elemento work también tiene un borde inferior. Para lograr ésto reusaremos la clase separator vista anteriormente, mientras se agrega una clase extra para aplicar estilos adicionales, color y tamaño.

Help

La sección de ayuda tiene la misma estructura html que la sección de creatividad, pero la diferenciaremos al agregar nombres de clases diferentes.

Clients

Ésta sección contiene una lista desordenada con las imágenes de cliente. Voy a usar placehold.it para generar las imágenes marcadoras de posición.

About

Aquí tenemos dos filas diferentes, una para el texto de introducción y uno para las personas.

La fila de introduction (introducción) contiene un título y un subtítulo, como lo vimos previamente en la sección de introduction.

Las lista de personas es una lista desordenada que contiene cuatro elementos, el último para propósitos de contratación. Cada elemento de la lista es de tres columnas de ancho y contiene una imagen, un enlace, el nombre y el puesto del individuo.

Video

La sección de video contiene solo un botón y la imagen de fondo estirada. En los próximos tutoriales, haremos éste una ventana modal que apunte a un video de Youtube.

Why us

Avanzando, la sección "why us" (¿por que nosotros? se hace de dos secciones individuales; una para una breve introducción y la otra para los servicios actuales.

La sección introduction es de 12 columnas de ancha y contiene el título encerrado en un <h3> y el texto para una breve descripcion en un <h4>. Como verás abajo, el título también tiene una clase separator para crear el efecto de borde mencionado previamente.

En la sección de services (servicios), cada elemento de lista contiene una imagen y una descripción.

Quote

Ésta sección hereda la misma estructura html que la sección de creatividad, pero con diferente texto para el botón centrado.

Get in touch

¡Solo un par mas! Ésta sección ofrece una breve notificación para el formulario. Es creado con una estructura html que probablemente se ve muy familiar por ahora, con un título y una descripción que tiene un separador entre ellos.

Contact

El formulario de contacto comprende de dos columnas, una para la meta locación y los enlaces de perfiles sociales y otra que contiene el formulario que ayuda al usuario a contactar a la firma.

De nuevo voy a usar el marcado para soportar Font Awesome, que se integrará en el próximo tutorial.

La primera columna es de cuatro columnas de ancho y la segunda es de ocho columnas de ancho. Aquí puedes ver realmente el poder de Skeleton boilerplate, porque estamos usando columnas y filas anidadas. El formulario tiene diferentes tamaños dentro de él; las primeras dos casillas son seis columnas de ancho dentro de un contenedor que tiene una anchura de ocho columnas.

Footer

Nuestro footer (pie) contiene algo de texto encerrado en un contenedor de doce columnas.

¡Eso es todo por Ahora!

Éste tutorial ha demostrado exactamente para que es Skeleton: hemos usado su marcado para crear la estructura de una página web. En el próximo tutorial tomaremos esa estructura y agregaremos estilos para darle un aspecto completamente único. ¡Ahí nos vemos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.