Ir al contenido principal

Entradas

Mostrando entradas de agosto, 2014

Curso 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 …

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: 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 n…

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><htmllang="es"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1">…

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.woffComo 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 …

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.


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…