Diseño Responsive, Crea tu propia web

¿Estas haciendo tu primer sitio responsive? Aprende profesionalmente.
Parte  1 de 3

Diseño Responsive, Crea tu propia web

Parte 1 de 3

Para empezar, debes tener claro los conceptos básicos del diseño responsive y porque voy a trabajar con este framework, para ello te recomiendo que antes leas ¿Qué es el Diseño Responsive?

Después de saber qué es el Diseño Responsive y las ventajas de Foundation CSS, empecemos a trabajarlo.

1. Descargando Framework Foundation 

Primeros Pasos Foundation

  • Damos clic en Download Foundation 5
  • En la siguiente página nos da varias opciones. Podemos descargar el framework completo o solo con las herramientas más básicas.

foundation2

  • Incluso podemos personalizarlo, podemos escoger: e color, tamaño de letras, las librerías, background, entre otros.

foundation3

 

  • En mi caso escogeré el completo y doy clic en Download.
  • Descomprimimos el archivo .zip y las carpetas que encontramos son las siguientes:

foundation4

  • Estos archivos son los necesarios para empezar con nuestro diseño responsive.
    Creare una  nueva carpeta, copio las carpetas CSS y JS para empezar mi proyecto.
  • Los explico a continuación:
    • Index.html: Este es un archivo de ejemplo que contiene algunos ejemplos, así como la estructura básica de una página hecha con Foundation. 
    • Human.txt: Un archivo TXT que contiene la información sobre las personas que han intervenido en la web y no es indispensable en un proyecto. Aquí puedes encontrar más información.
    • Robots.txt: Este archivo txt es para darle instrucción a los robots o arañas de los buscadores. Con este archivo podemos indicar que páginas o carpetan deben indexar y cuales no. Si quieres puedes leer más de esto aquí.

2.  Instalando Foundation

  • Ahora, con la ayuda de Sublime Text (Editor de Texto), creo un nuevo archivo index.html.
  • Entre las etiquetas head y /headdebemos tener los siguientes enlaces, que son archivos CSS y Javascript para que funcione correctamente el framework.
  • Los archivos que enlazamos son los siguientes:
    • Foundation.css: Es el CSS por defecto de Foundation, aquí esta todo los estilos que vamos a usar con la libreria.
    • Normalize.css: Este archivo si queremos lo incluimos. Este es con el fin de estandarizar tu sitio web, se visualice de la misma forma en cualquier explorador de internet. Como front-end, me imagino que sabes lo tedioso que es, que se vea bien una web en todos los exploradores y más si el cliente usa Internet Explorer.
  • Ahora, necesitamos configurar el Javascript, para que se active el responsive cada vez que alguien llega a nuestra página. Para ello, incluimos las siguientes líneas a lo último, antes de cerrar la etiqueta /body

Finalmente, nuestro proyecto debería de verse así:

Esta fue la forma fácil y sencilla de instalar Foundation CSS y aquí  finaliza la primera parte de este tutorial, cómo instalar Foundation CSS.

En la segunda parte, aprenderemos los primeros pasos.

No olvides seguirme en twitter @juksoto y comparte este artículo.

Etiquetas:, , , , ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en