El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Agiliza tu trabajo con boilerplates

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
04:45
  Añadir a marcadores

Transcripción

Los boilerplates son plantillas que nos servirán para comenzar proyectos web fácilmente. Este tipo de boilerplate van desde los más simples que te servirán para generar páginas webs estáticas hasta los que incluyen frameworks muy sofisticados o incluso, algunos, que solo se enfocan en los estilos o solo en la estructura a base de grids. Algunos de los más simples y populares en la red es HTML5 Boilerplate, que provee integración a herramientas como jQuery y a Modernizr. Trae integrado en la estructura los códigos para llevar métricas con Google Analytics. Además del performance que promete, este paquete incluye Normalize.ccs, que te ayudará en los navegadores a procesar los componentes de una página web de forma más consistente y siguiendo los estándares web. Si lo que deseas son componentes ya estilizados y listos para usar, puedes trabajar con Bootstrap o Foundation pero, en ese tipo de paquetes, Materialize es también una muy buena opción que tiene integrado los componentes de Material Desing listos para trabajar en una página o aplicación web. Sería buena idea que les dieras una oportunidad. Ahora, si deseas solo manejar la estructura base de tu sitio, pues ya tienes un esquema para implementar el diseño y componentes de tu sitio, entonces, puedes pensar en 960 Grid, que como su nombre lo indica, trabaja solo con el sistema de grid o estructura base de tu sitio y que te permitirá ordenar tus componentes a tu uso y necesidad. Hagamos un par de ejemplos con algunas de estas herramientas. Para comenzar con el HTML5 Boilerplate, tenemos que acceder al sitio del mismo nombre: html5boilerplate.com Al entrar, vamos a encontrar aquí un botón que dice Download, y uno que dice Get a custom build. Seleccionamos la opción que dice Download. De cualquier manera, y en lo que comience la descarga, si revisas la opción que dice Get a custom build, es una opción que tú vas a poder configurar a tu gusto y necesidad. Es decir, puedes trabajar con una versión Estática, Responsiva o basada en Bootstrap. Puedes utilizar también algunos otros componentes. Si utilizas en este caso Bootstrap, te van aparecer más opciones sobre cómo ir configurando tu paquete. Esto es ideal cuando ya tienes ciertos elementos que vas a necesitar. De lo contrario, con que puedas hacer simplemente clic en el botón de descarga y tengas este archivo, lo puedes utilizar. Ahora que está descargado, simplemente vamos a descomprimirlo y voy a arrastrar la carpeta directamente a Visual Code. Aquí en la carpeta podemos ver que hay varios tipos de archivos. De hecho, dentro de los tipos de archivos, podemos encontrar el clásico index.html que es donde viene absolutamente toda la estructura, y aquí es donde voy a comenzar a trabajar y será mi archivo base para poder hacer mi sitio. La otra versión que tenemos es Materialize. Materialize también tiene unas grandes características y lo mejor de todo es que vas a utilizar componentes que ya están prefabricados. Por ejemplo, ¿quieres utilizar un botón? Aquí vienen los estilos de los botones y, además, aparecen las etiquetas de cómo los puedes utilizar. ¿Necesitas otra cosa como cards o tarjetas? Aquí tienes las versiones de las tarjetas y cómo puedes manipularlas o personalizarlas a tu gusto. También existen otros componentes, como un componente de formularios, donde ya tenemos la lista de todos los elementos de entrada precargados, o podemos trabajar también con elementos de paginación que también ya vienen prediseñados. Lo único que tenemos que hacer es utilizar la clase adecuada para que esto se vea reflejado en el html que estamos trabajando. La otra opción que estábamos revisando también es 960 Grid System. Este 960 Grid System es simplemente una forma en cómo vamos a tener dividida la pantalla en grids. Y aquí solamente vamos a tener definido todo en renglones y columnas de manera estática. Aunque existe también una versión para poderlo trabajar de manera dinámica. Incluso este 960 Grid System tiene una versión para trabajar con Photoshop, que nos ayuda a exportar imágenes enfocadas en este espacio y con los tamaños adecuados. De esta manera, trabajar con este tipo de boilerplate es una manera muy rápida de trabajar y de poder generar una aplicación web. No olvides tampoco algunos de los más famosos como pueden ser Bootstrap, o incluso Foundation. Este tipo de herramientas también ofrecen otro tipo de características como por ejemplo, en el caso de Foundation podemos utilizarlo para sitios web o para correos electrónicos, lo cual hace también de este un framework muy usable.