feed

Bootstrap

Después de un tiempo de espera llega la esperada nueva versión de Bootstrap. Lo hace en forma de Release Candidate 1. Se espera, al menos, otra RC más antes de la versión final, pero ya podemos ir viendo lo que será esta nueva versión y comenzar a analizarla. Boostrap 3 RC1 ya está aquí. La nueva versión del framework web frontend de moda viene cargada de novedades. Las principales tienen que ver con el abandono de soporte de navegadores antiguos por defecto y un diseño pensado desde el principio para dispositivos móviles. Nuevo repositorio, nueva distribución A nivel estructural lo más destacable es que el proyecto se ha mudado a un nuevo repositorio dentro de Github que ahora cuenta el equipo con cuenta propia donde están los diferentes proyecto relacionados. Dentro del repositorio se ha establecido un directorio llamado dist donde se encuentra el producto final ya compilado y listo para usar en nuestros proyectos web. Este directorio es el que está publicado como descarga en el sitio oficial. Estructura de archivos La nueva estructura de archivos de la distribución es la siguiente. bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js Como podemos ver se ha reducido el número de archivos al desaparecer los iconos Glyphicons que ahora son un proyecto separado. También se ha eliminado el archivo para diseño responsive que ahora se integra dentro del propio framework. Por tanto nos quedamos con sólo dos archivos el correspondiente al CSS y al Javascript de los que tenemos la versión comprimida y sin comprimir. Glyphicons como proyecto separado No tenía mucho sentido mantener dentro del proyecto unos iconos como los Glyphicons basados en una imágen PNG habiendo soluciones basadas en font-face como Font Awesome que permiten la escalabidad. Sin embargo sigue estando disponible para el que desee usarlo en un proyecto mantenido por el propio equipo. Aquí puedes verlo. Compatibilidad de navegadores Los navegadores soportados por defecto serán los siguientes. Chrome (Mac, Windows, iOS, and Android) Safari (Sólo Mac e IOS ya que el de Windows está más o menos discontinuado) Firefox (Mac, Windows) Internet Explorer Opera (Mac, Windows) Extraoficialmente dicen que debería verse bien tanto en Chromium para Linux como en Internet Explorer 7, pero no están soportados de forma oficial. De la misma forma comentan que aunque IE8 e IE9 están soportados no todas las propiedades CSS3 están implementadas en estos navegadores como pueden ser las esquinas redondeadas. Además para el uso de los media query será necesario el uso de respond.js. Además para todas las versiones será necesario el uso de Jquery. Muchos y variados ejemplos En la nueva versión se han esmerado aún más en darnos ejemplos de diferentes prototipos con los que comenzar y han habilitado un sitio web donde se pueden ver diferentes ejemplos de plantillas básica. Es de esperar que en la versión final haya aún mas ejemplos y prototipos básicos. Sin duda un gran recurso para los iniciados que necesiten una base por la que comenzar. Nuevo estilo Como siempre los estilos y los colores de los diferentes elementos será altamente personalizable, pero cabe destacar que en el estilo por defecto apuestan por los colores básicos y planos. Una muestra de ello son los nuevos botones en los que se deja atrás el uso de degradados que las daba aspecto de profundidad y se pasa al uso de colores planos. En cuanto a colores son menos vivos que los de la versión 2. En cuanto a los nuevos componentes lo más destacable son los nuevos paneles que se pueden hacer y que todos ellos en menor o mayor medida se han adaptado al nuevo estilo de colores. Podemos ver todos los nuevos componentes en la página de documentación. Personalización Las personalizaciones de tema no están disponibles aún, pero el equipo dice que ya estarán disponibles con la segunda Release Candidate. Como en la versión 2 podremos definir los aspectos básicos del framework como las fuentes a utilizar, la paleta de colores o qué componentes queremos incluir. De todas maneras los más manitas pueden obtener la versión sin compilar de less y hacer estos cambios de variable a mano fácilmtente. También podemos hacerlo a la vieja usanza de sobrescribir los estilos que queramos en una nueva hoja de estilos. Arreglos generales Además de las novedades se ha reescrito y mejorado casi por completo todo el núcleo del framework con los siguientes numeros: alrededor de 1.600 commits, unas 72.000 adicciones/eliminaciones y cerca de 300 archivos cambiados. Como vemos el equipo y la comunidad no ha parado para darnos lo mejor de Bootstrap. Habrá que esperar a la versión final, pero esta primera Release Candidate no pinta nada mal. En Genbeta Dev | Bootstrap Más información | Sitio oficial Código fuente | Github

Material design, la guía de diseño de Google ha roto barreras y en la actualidad se está convirtiendo en una de las guías de diseño más reclamadas. Materializecss es un framework que simplifica el proceso de creación de diseños web. Este modesto framework acaba de actualizar a su primera 'Alpha release' y ya se ha usado para alguna aplicación Android con Cordova y en varias webs.

Algunas características de Materializecss

Este framework ofrece una serie de recursos en CSS, Fuentes y JS así como...

Leer más »

Angular sigue aumentando su cuota de mercado mientras llega la versión 2. Una de las características que más destaca del framework es su extensibilidad y la forma tan sencilla con la que se puede añadir nuevas funcionalidades a las aplicaciones. Esta extensibilidad se consigue añadiendo módulos al framework.

Estos módulos aportarán nuevas directivas, servicios, filtros etc. ¿Ahora bien cuales...

Leer más »

Bootstrap se ha convertido en el framework de moda para la construcción de Webs “Responsive Design“ por excelencia. Siendo implementado, por ejemplo, por defecto en ASP.NET MVC5, sea cual sea el lenguaje de Backend.

Miles de temas donde elegir


Si bien en la propia página de Bootstrap podemos acceder a un buen número de ejemplos de páginas reales construidas con el framework, y que nos puede dar...

Leer más »

Después de un tiempo de espera llega la esperada nueva versión de Bootstrap. Lo hace en forma de Release Candidate 1. Se espera, al menos, otra RC más antes de la versión final, pero ya podemos ir viendo lo que será esta nueva versión y comenzar a analizarla. Boostrap 3 RC1 ya está aquí.

La nueva versión del framework web frontend de moda viene cargada de novedades. Las principales tienen que ver...

Leer más »

Seguimos en Genbeta Dev con nuestro repaso a lo más interesante ocurrido durante 2012 en el mundo del desarrollo (además de especular un poco sobre lo que nos va a deparar este 2013). Ahora le toca el turno a los proyectos Open Source enfocados en el desarrollo que más fuerte han pegado en 2012. Ha sido una votación muy reñida y el resultado ha sido el siguiente:

3. MongoDB

El mercado de las...

Leer más »

Bootstrap, el framework frontend para desarrollo web de Twitter, se ha convertido en algo cotidiano durante este 2012. Tal ha sido el éxito de Bootstrap que dando un paseo por La Web ten encuentras cientos de sitios con un look&feel clónico… exactamente como en los primeros días de gloria de otros proyectos como Wordpress o Drupal. Este éxito se debe en buena parte a los cambios introducidos en...

Leer más »

A estas alturas de la película explicarte que es Bootstrap carece de sentido. El framework HTML5 – CSS3 de Twitter está siendo una de las sensaciones del año y cosas como {wrap}bootstrap lo demuestran. Se trata de una especie de marketplace al App Store modo y en el que los diseñadores y desarrolladores pueden vender sus temas, plantillas y demás complementos para hacer de Bootstrap una...

Leer más »

Bootstrap es un framework que simplifica el proceso de creación de diseños web combinando CSS y JavaScript. Ha sido desarrollado por Twitter que recientemente liberó su versión 2.0. La mayor ventaja es que podemos crear interfaces que se adapten a los distintos navegadores (responsive design ) apoyándonos en un framework potente con numerosos componentes webs que nos ahorrarán mucho esfuerzo y...

Leer más »

Las cucadas que te puedes encontrar en el mundo del front-end en esta época de HTML5, CSS3 y poderosos frameworks Javascript son cuasi-infinitas. La que os traemos hoy se llama bootstrap-wysihtml5 y no miente, da lo que promete: un plugin Javascript que permite la posibilidad de crear y manejar elegantes y sencillos editores WYSIWYG basados en el editor de texto enriquecido en HTML5 wysihtml5 y...

Leer más »

addEventListener('load', function (event) { prettyPrint() }, false);

En el primer artículo de esta serie hablábamos de como crear una estructura básica para nuestro proyecto, definiendo un layout para el mismo. En esta ocasión nos centraremos en los componentes más representativos que podemos utilizar y en los plugins integrados con jQuery de que disponemos en la versión 2.0 de Bootstrap.

...
Leer más »

Sigue a Genbetadev