Blog de TemplateMonster

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

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:

¿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:

1
2
3
4
5
6
7
8
9
10
11
 
<!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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!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.

¿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:

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<!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:

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.