EL KIT Front-end

que todos deben conocer

Adios Webmasters


Ya no somos todólogos, el trabajo en la web se ha ido delegando a desarrolladores específicos.

Existen incontables herramientas front-end


Vamos a platicar de algunas, pero tu Kit lo puedes armar con las que más te gusten.

Buen día...


Mi nombre es  Luis Antonio Gómez  .

Fundador y co-fundador de...
 

Da seguimiento a la charla


En Twitter o Facebook puedes compartir lo más interesante, por ejemplo:

"Yo arme #MiKitFrontEnd" con...





¡Ya quiero conocer el kit!




Herramientas útiles en HTML5 para tu kit

Emmet


Es un plugin para editores de texto que permite escribir HTML increíblemente rápido, abrevia todo, desde etiquetas, nodos, clases, ids y además permite operadores matemáticos.



Ejemplo


Código Emmet
 #page>div.logo+ul#navigation>li*5>a{Item $}

Código HTML generado
 <div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

HAML


Es una abstracción de HTML, una manera de simplificar su escritura y dotándolo de más poder. Funciona con Ruby pero no es solo para programadores de este lenguaje.



Ejemplo


Código HAML
 %section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

Código HTML generado
 <section class="container">
  <h1>Título</h1>
  <h2>Subtítulo</h2>
  <div class="content">
    Contenido
  </div>
</section>




Ahora vamos con JAvascript

Coffescript


Es un lenguaje que al compilarse entrega código en JavaScript, querido por muchos desarrolladores por su limpia sintaxis, algo similar a Python y todo desde NodeJS.



Ejemplo


Código CoffeScript
 # Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

Zepto.js


Es una de las librerías más compactas que existen, es altamente compatible con JQuery y lo mejor es que es optimizada para navegadores modernos. Tan solo son 9.2K en producción.



Ejemplo


Código JavaScript
 var list, number, opposite, square;

number = 42;

opposite = true;

if (opposite) {
  number = -42;
}

square = function(x) {
  return x * x;
};

list = [1, 2, 3, 4, 5];




Por último, vemos css

SASS


Es un pre-procesador de CSS en Ruby, nos permite manejar grandes cantidades de código, ayuda a reciclar y escribir a gran velocidad usando operadores matemáticos con variables y funciones.



ejemplo


Código SASS
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Ejemplo


Código CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Stylus


Es un pre-procesador de CSS basado en NodeJS, al igual que Sass, nos permite escribir de manera limpia y organizada el código para dar como resultado código CSS después de compilar.

Ejemplo


Código Stylus
border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body a
  font: 12px/1.4 "Lucida Grande", Arial, sans-serif
  background: black
  color: #ccc

form input
  padding: 5px
  border: 1px solid
  border-radius: 5px

ejemplo


Código CSS

body a {
  font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
  background: #000;
  color: #ccc;
}
form input {
  padding: 5px;
  border: 1px solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}




Existen muchisimas más alternativas a estos

Ventajas


Proyectos grandes requieren mejor organización y mayor velocidad de escritura, estas herramientas proveen eso.

Lungo

Un framework para desarrollo de WebApps que utiliza Stylus.

Lo mejor de todo es...



Que son Software Libre y Open Source la mayoría, por lo que no tenemos que pagar por utilizarlos, pero recuerda recomendar las herramientas.

¡Gracias!


¿Tienes preguntas?


También siguenos en:

@jimmylagp
@html5facil
@ninjacodetv

Twitter | Facebook | Google+

EL KIT Front-end

By Luis Antonio Gómez

Made with Slides.com

EL KIT Front-end

  • 1,849

More from Luis Antonio Gómez