viernes, 29 de agosto de 2014

Curso Bootstrap: Sistema de columnas

Bootstrap - Sistema de columnas

En la anterior entrada creamos una página básica con Bootsrap. Pero no aprovechamos nada del potencial que tiene este framework, era un ejemplo de estructura con solamente un texto a mostrar. El objetivo era crear una plantilla preparada para trabajar en ella de una forma más eficiente.

Mi consejo es duplicar siempre esa plantilla, cuando vayamos a probar alguna funcionalidad antes crearemos una copia, así evitamos tener que estar borrando líneas de código anterior y directamente trabajamos en limpio.

En esta entrada vamos a trabajar con el sistema de columnas.

¿Qué es el sistema de columnas?

Bootstrap 3 tiene cuatro rangos de clases para las columnas: xs(móviles), sm (tablets), md (equipos con resoluciones normales), y lg (equipos con grandes resoluciones).

Podemos combinar las clases para crear una vista más dinámica y flexible de nuestra web.

Los rangos de clases son escalables, lo que quiere decir que si queremos que una caja ocupe el 50% del ancho total tanto para dispositivos móviles (xs) como tablets(sm), sólo tendremos que especificar la clase del menor, en este caso xs.

Cada rango de clases está a su vez dividido en doce columnas, por ejemplo si una caja va a ocupar el ancho total en dispositivos móviles le asignaremos la siguiente clase: <div class="col-xs-12"></div>

Si por el contrario va a ocupar la mitad la clase sería: <div class="col-xs-6"></div>

Con la siguiente imagen vamos a entender mejor el funcionamiento:

Bootstrap - Sistema de columnas

La imagen refleja algunas de las posibles variantes del sistema de columnas. Podemos combinar clases, como en la primera y segunda fila, o incluir sólo una clase para todas las resoluciones como en la tercera fila.

¿Cuál es la diferencia?

En la primera fila vemos que hay clases combinadas, las de móvil (xs) y las de equipos con resoluciones normales (md). Si visualizamos estas columnas en un dispositivo móvil o una tablet (recuerda la escalabilidad de las clases) la primera columna ocupará el ancho total(.col-xs-12) mientras que la segunda ocupará la mitad (.col-xs-6). Por el contrario si lo visualizamos en un equipo de sobremesa, tendremos algo similar a la imagen. La primera columna ocupará ocho partes del total del ancho y la segunda las cuatro partes restantes.

Un dato importante que debemos tener en cuenta es la suma total. Si la suma de las columnas sobrepasa de doce, pasarán a estar en dos filas o más.

A continuación podéis copiar el código y probarlo en vuestros equipos.


<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cregarru - Curso Bootstrap: Ejemplo básico</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim y Respond.js IE8 soporta elementos HTML5 y media queries -->
    <!-- ATENCIÓN: Respond.js no funciona si visualizas la página vía file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <div class="col-xs-12 col-md-8">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
    </div>
    <!-- jQuery (necesario para los plugins de Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Incluye todos los plugins compilados de Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

jueves, 28 de agosto de 2014

Curso HTML 5: Introducción

Curso HTML 5: Introducción

¿Qué es HTML5?

HTML son las siglas de HyperText Markup Language (lenguaje de marcas de hipertexto). Este nombre hace referencia al estándar de código y estructura básica con la que vamos a trabajar.
El número 5 hace referencia a la quinta versión de este estándar, que trae consigo novedades y mejoras frente a sus predecesores.

Una de las mejoras más significativas son las nuevas etiquetas que aportan un significado semántico, y por lo tanto tendrán un valor añadido en cuanto al posicionamiento web.

Hay que tener presente que aún está en una fase experimental. Navegadores obsoletos como IE7 no van a poder interpretar correctamente muchas de las nuevas funcionalidades.

En la siguiente imagen podemos observar las diferencias entre HTML5 y HTML4/XHTML:

HTML4 vs HTML5

De un vistazo podemos percatarnos como con HTML5 obtenemos una estructura más limpia y estandarizada, mediante que con HTML4/XHTML debíamos aplicarles identificadores o clases a todas las cajas y careciamos de un significado semántico.

Para que no quede ninguna duda de la estructura básica de un documento HTML5, vamos a descubrir cuál es la función de cada elemento.

<DOCTYPE html>: En la primera línea declaramos el tipo de documento con el que vamos a trabajar. En nuestro caso HTML. Ahora se ha simplificado su estructura.

<html lang="es">: Esta etiqueta es la que contiene toda la estructura de la página. Siempre debe de ir antes de la etiqueta <head>. Podemos elegir el idioma de nuestra página, en nuestro caso al ser Castellano le pondremos "es".

<head>: Es el encabezado de la página. Dentro introduciremos elementos que son importantes para el desarrollo y configuración de la web; ya sea el título, o llamadas externas a archivos CSS o JavaScript.

<meta charset="utf-8" />: Especificamos la codificación de carácteres. También puede ser "iso-8859-1", dependiendo de nuestra necesidad.

<body>: Aquí comienza la zona donde introduciremos todo el contenido de nuestra página.

<header>: Es la cabecera, debe de ser utilizada para incluir el título de la web y un texto de introducción.

<nav>: Dentro de esta etiqueta incluiremos los enlaces para que el usuario navegue entre nuestras diferentes secciones.

<section>: Una sección es la agrupación de contenido sobre una temática, convenientemente con un encabezado.

<article>: Contendrá texto distribuido independientemente de la web. Es decir, está pensado para albelgar noticias, comentarios, entradas...

<aside>: Similara a un sidebar, donde debe haber contenido relacionado al contenido de la web.

<footer>: El píe de página. Donde ubicaremos la información sobre el autor de la página y enlaces con información para el usuario.

Como podemos ver, cada etiqueta tiene una función especifica. Es muy importante darle el uso debido, ya que dependerá de ello un buen posicionamiento en el futuro.

Para finalizar, os dejo las estructuras básicas de HTML5 y HTML4/XHTML.

HTML5


<DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Cregarru - Plantilla básica HTML 5</title>
  </head>
  <body>
    <header></head><!--fin header-->
    <nav></nav><!--fin nav-->
    <section></section><!--fin section-->
    <article></article><!--fin article-->
    <aside></aside><!--fin aside-->
    <footer></footer><!--fin footer-->
  </body>
</html>

HTML4/XHTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cregarru - Plantilla básica HTML 4/XHTML</title>
  </head>
  <body>
    <div id="header"></div><!--fin header-->
    <div id="nav"></div><!--fin nav-->
    <div id="content"></div><!--fin content-->
    <div id="aside"></div><!--fin aside-->
    <div id="footer"></div><!--fin footer-->
  </body>
</html>

martes, 26 de agosto de 2014

Curso Bootstrap: Ejemplo básico

Curso Bootstrap: Ejemplo básico
En la anterior entrada, aprendimos qué es Bootsrap y entendimos su estructura de archivos y directorios. Una vez tenemos claros todos los conceptos básicos, el siguiente paso es crear nuestro primer proyecto. De esta manera reforzaremos de una manera más eficiente todo lo que aprendimos con anterioridad.
La estructura básica de un archivo HTML doy por hecho que ya sabrás como funciona. De lo contrario no te preocupes, puedes aprender que es HTML y como funciona en el siguiente enlace.
Para crear nuestro primer proyecto, abrimos una nueva página en blanco en nuestro editor de texto preferido, ya sea Sublime Text, Bluefish o incluso un Bloc de notas. Acto seguido copiaremos el siguiente código que se muestra justo debajo.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cregarru - Curso Bootstrap: Ejemplo básico</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim y Respond.js IE8 soporta elementos HTML5 y media queries -->
    <!-- ATENCIÓN: Respond.js no funciona si visualizas la página vía file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>¡Hola mundo!</h1>

    <!-- jQuery (necesario para los plugins de Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Incluye todos los plugins compilados de Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
La estructura de la página es básica, si tienes problemas para interpretarla te invito a que leas el Curso de HTML.
El siguiente paso será guardar todos los cambios y visualizar el resultado en un navegador web (Firefox, Chrome, Opera, Internet Explorer,...). Como podemos ver, el resultado es una página completamente en blanco con el texto "¡Hola mundo!".
Bootstrap Ejemplo básico

¿No te ha quedado claro el proceso que hemos realizado? No te preocupes, vamos a explicar en que consisten los puntos más destacables del código que hemos introducido.
En el encabezado encontramos la siguiente línea:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Su función es la de forzar al navegador Internet Explorer que la página se visualice en la última versión que tengamos instalada. Puede pasar que tengamos la versión 10 de IE y visualicemos la web con una versión anterior, como IE7, si está asignado por defecto. Seguramente, al tratarse de una versión obsoleta del navegador, el resultado no será el que esperamos. Para evitar estos problemas introducimos la etiqueta anteriormente mencionada.
Una línea más abajo, podemos ver lo siguiente:

<meta name="viewport" content="width=device-width, initial-scale=1">

Esta etiqueta es la encargada de adaptar la página al ancho del dispositivo con el que estemos trabajando. Imprescindible si queremos que se visualice correctamente en dispositivos móviles por ejemplo.
En la siguiente línea, indicamos donde se encuentra la hoja de estilo de Bootstrap

<link href="css/bootstrap.min.css" rel="stylesheet">
Para una correcta visualización en navegadores antiguos, como IE8 o IE7, incluiremos los siguientes archivos:

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

Su utilidad es la de ayudar a la interpretación de HTML5 y media queries en navegadores que no tienen soporte nativo.
Por último, si queremos utilizar los plugins con los que cuenta Bootstrap, debemos incluir la librería jQuery y las funciones propias de Bootstrap.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Estas llamadas las incluimos al final de la página, antes de la etiqueta de cierre </body>, para no ralentizar tanto la carga de la web.
Como vemos, este ha sido un ejemplo muy básico. En próximas entradas iremos descubriendo más a fondo el potencial de Bootstrap.

Curso Bootstrap: Introducción

Curso Bootstrap: Introducción

¿Qué es Bootstrap?

Bootstrap es el framework más popular para crear proyectos responsive de una forma rápida y eficaz. Mediante HTML, CSS y JavaScript podemos realizar una web muy vistosa y funcional en cuestión de minutos.

Podemos descargar todos los archivos necesarios para su uso en su página web.

¿Qué incluye Bootstrap?

Una vez hayamos descargado Bootstrap nos encontraremos la siguiente estructura de directorios y archivos:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Como podemos observar hay tres directorios claramente identificados: CSS, JavaScript, Fonts.

En el primer directorio, CSS, tenemos disponibles cuatro archivos bootstrap.css, bootstrap.min.css , bootstrap-theme.css y bootstrap-theme.min.css.

bootstrap.css, contiene todos los estilos que por defecto están creados para una buena visualización de los proyectos. Es conveniente no modificar este archivo y menos sin saber bien que estamos haciendo. Debe estar incluido en todas las páginas.

bootstrap.min.css, es prácticamente el mismo archivo que el anterior. La diferencia que hay entre ambos es la optimización. Este archivo está minificado para mejorar la carga de nuestro proyecto.

bootstrap-theme.css, nos ayudará a producir efectos en 3D a los botones, entre otros elementos. Este archivo es opcional.

bootstrap-theme.min.css, es la versión minificada del archivo anterior.

Dentro del directorio JS nos encontramos con dos archivos, bootstrap.js y bootstrap.min.js.

bootstrap.js contiene todas las funciones necesarias para el correcto uso de elementos integrados en Bootstrap, como pueden ser un carrusel animado o un menú desplegable. Más adelante iremos descubriendo todo lo que se puede hacer con Bootstrap. Es conveniente no modificar este archivo y menos sin saber bien que estamos haciendo. Debe estar incluido en todas las páginas.

bootstrap.min.js, es prácticamente el mismo archivo que el anterior. La diferencia que hay entre ambos es la optimización. Este archivo está minificado para mejorar la carga de nuestro proyecto.

Por último, el directorio fonts contiene los famosos glyphicons, una librería de iconos y símbolos monocromáticos que nos ayudará a darle un aporte visual a nuestros proyectos.

Una vez familiarizados con la estructura de directorios de la que se compone Bootsrap, el siguiente paso será crear nuestra primera página de ejemplo. Nos introduciremos de lleno en la siguiente entrada para no extendernos demasiado en esta introducción.

jueves, 21 de agosto de 2014

Tablas en responsive

Seguramente alguna vez hemos tenido problemas a la hora de crear una tabla, y que además se visualice correctamente en webs adaptativas o responsive. Investigando una manera de mostrar las tablas de manera decente, encontré esta página que me parece bastante interesante para solucionar el problema.

Tablas en responsive

Nos dan tres opciones posibles en cuanto a mostrar una tabla en dispositivos móviles.

1º - The Unseen Column

Esta opción básicamente oculta los elementos menos importantes. La tabla de ejemplo tiene nueve columnas, cuando la resolución de pantalla llega a 800px oculta la segunda columna con la propiedad nth-child(n) Esta es una propiedad de CSS3 que básicamente quiere decir elemento hijo. Donde está (n) tenemos que introducir un número. Por lo que si ponemos td:nth-child(2){display:none;} ocultará la segunda columna de la tabla, en este caso. Se puede ver el código en la página. Esto era una aclaración por si hay dudas.

2º - Flip Scroll

El efecto que se consigue con esta opción es un poco feo desde mi punto de vista. Lo que hace es crear un scroll al contenido de la tabla. A la parte del encabezado, los titulares (thead), se le aplica un float:left y display:block para mostrarlo de manera vertical. Al resto de la tabla (tbody) se le da un ancho automático y un overflow:scroll para poder desplazar el contenido.

3º - No More Tables

Por último tenemos este recurso que es el que más me ha gustado aunque utiliza elementos de HTML5 y habría que ver cómo solucionar la compatibilidad con versiones antiguas de Explorer. Cuando se redimensiona el navegador oculta las cabeceras de la tabla (thead) pero NO con display:none le asigna una posición absoluta y negativa forzando a que las cabeceras estén fuera de la estructura. Esto es básicamente por el posicionamiento web. En cuanto al contenido de la tabla, lo que hace es mostrarlo en filas en vez de columnas para tener una mejor disposición del contenido. Espero que se haya entendido bien, en la web podéis redimensionar el navegador, ver el código y entenderlo mejor.