¿Bootstrap o Foundation? ¿Cuál HTML5 Framework es más Sensible para el Desarrollo de Sitios Web?

05 junio 2013 Diane Parks

Las marcas están orientadas a llamar la atención de los clientes de todas las maneras posibles. Los desarrolladores hacen todo lo posible para entregar los resultados cuantificados y competitivos. Sitios exitosos deben ser optimizados para ofrecer la mejor experiencia posible. Si Usted tiene una estrategia específica para sitios separados o un solo sitio adaptable (responsive), ambos escenarios requieren los enfoques convincentes. En este caso HTML5 ofrece dos grandes frameworks para el desarrollo del sitio.

Vamos a echar un vistazo a dos plataformas: Twitter Bootstrap y Foundation 4.

Twitter Bootstrap

La nueva versión de Twitter Bootstrap es 2.3.1 lanzada el 01 de marzo de 2013. Ella ofrece varias características para el desarrollo de sitios web para desarrolladores principiantes y expertos. Los sitios construidos con la ayuda de Bootstrap funcionan muy bien en computadoras, tabletas y teléfonos inteligentes. LESS es utilizado para modificar la interfaz predeterminada de usuario de Bootstrap. Vamos a echar un vistazo a sus características:

Ofrece grids fijados y líquidos – 724px, 940px, 1170px
Ofrece 12 columnas
Sus herramientas de la interfaz de usuario son ideales para la creación rápida de un prototipo
Se gestiona a través det Github
Compatible con Chrome, Firefox, Safari, IE+ y Opera con tabletas y teléfonos inteligentes.

¿Qué incluye Bootstrap?

Bootstrap es una colección de HTML, CSS y Javascript, pero aquí hay una lista de categorías para que Usted pueda entender la manera de su implementación en su plantilla de HTML básico. Para desarrollar cualquier sitio o aplicación de Bootstrap, primero tiene que añadir CSS y JavaScript a su plantilla de HTML básico.

La plantilla de HTML básico tiene la siguiente estructura:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>

Para crear una plantilla Bootstrap, hay que agregar algunos ficheros CSS y JS :

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Así, su plantilla Bootstrap está lista. Usted puede empezar a crear aplicaciones y sitios web.

Más ejemplos :

Diseño Líquido/Fluid

Cree un diseño líquido con la ayuda del nuevo sistema de grid

como es mostrado aquí:

Navegación justificada

Cree una página hermosa de marketing con enlaces de navegación de la misma anchura en una barra de navegación modificada usando esta plantilla.

Marketing 'estrecho'

Para pequeños grupos de organizaciones cree una plantilla impresionante.

Carrusel jumbotron

Utilice la función de carrusel para crear un sitio web más interactivo.

Foundation 4

4.0 es la última versión de Foundation lanzada el 28 de marzo de 2013. Esta versión actualizada es más rápida, más inteligente y más fácil de usar. Su sintaxis inicial de grid ha sido modificada. Y la sintaxis HTML nueva es altamente flexible. Con los cambios en la tipografía y el soporte de navegadores Foundation 4 es único.

Tiene grids fijados en varias plataformas
Ofrece 1-16 columnas con personalizador
Tiene un conjunto de herramientas de interfaz de usuario que no se adhiere a cualquier estilo de conjunto
Se gestiona a través det Github
Compatible con navegadores Chrome, Firefox, IE +, Safari con OS, i Pad, Android 2, 4 tableta y teléfono, y Windows Phone 7 +

¿Qué incluye Foundation 4.0?

Aquí hay una lista de algunas ccaracterísticas útiles para creación de proyectos con la ayuda de CSS o la versión Sass:

Grid es compatible con cualquier dispositivo y también ofrece ordenamiento, nesting, offsets con soporte de presentación de dispositivo para facilitar la creación de diseños.
Función de navegación ayuda a crear el estilo de la barra compleja superior con la navegación desplegable de 3 niveles para barras simples, barras laterales y soporte de subnav pills.
Soporte de UI Elements para incluir muchos elementos útiles tales como información sobre herramientas, etiquetas, clases de visibilidad para que se pueda ocultar o mostrar las cosas de acuerdo con la orientación de la pantalla o el tamaño, alertas, paneles y muchos más.
Orbit- slider impresionante de contenido o de imágenes con muchas opciones: bullet thumbs, paddles, timers etc.
Joyride – plugin personalizado disponible con variables de CSS o Scss.
Magellan es la mejor opción para mostrar su ubicación exacta en la página mediante la creación de la navegación flexible y pegajosa.
Reveal le permite llamar a los modales en la misma página junto con los modales spawn posteriores sin uso de Javascript.

También hay muchas otras características útiles como botones, formas, tipografía, sección, compensación, información sobre herramientas y desplegables.

Aquí ofrecemos la estructura de markup para ayudarle a entender y crear un sitio o una aplicación que Usted necesita:

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <link rel="stylesheet" href="css/normalize.css" />
  <!-- If you are using CSS version, add this -->
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/app.css" />

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- body content here -->

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script>
  $(document).foundation();
  </script>
</body>
</html>

Descripción corta – Características similares

Twitter Bootstrap y Foundation 4.0 ofrecen las características que son similares:

Alertas
Breadcrumbs
Botones
Desplegables
Formas
Etiquetas
Lista
Paginación
Navegación
Barras de progreso
Tablas
Pestañas
Thumbnails
Información sobre herramientas
Tipografía

Cosas para considerar

Antes de elegir un framework para iniciar su proyecto. Es necesario mencionar que los sitios de Foundation no ofrecen el tipo de consistencia que se obtiene a través de Bootstrap. Por otra parte, Foundation requiere tiempo para configuración. Bueno, una gran parte del resultado final depende de Usted.

Para resumir

A causa de los rumores recientes sobre frameworks de HTML5 los desarrolladores comienzan a pensar en las ventajas de SASS y LESS. Ambos ofrecen sus problemas únicos y ventajas. Framewroks definitivamente facilitan la vida. Ellos ofrecen numerosas oportunidades en el camino de desarrollo de sitios web. Es el momento bueno para tratar de usar uno de ellos.

comparación html5

Diane Parks

Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!

Artículos similares

Desarrollo web