Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

La navaja suiza del desarrollador web
(a.k.a. The Web developer toolbox)

Una charla de @jluna79 para #ITerando.

Julio de 2012

Una brevísima historia de cómo llegamos hasta acá.
HTML, CSS y JavaScript: los bloques constructores de la web.

Referencia útil: W3 Schools

El largo (y sinuoso) camino hacia los estándares.
En 15 años la web ha evolucionado un montón
está claro que ...

la web ya no es lo que era*

* y las herramientas tampoco
Ahora tenemos Web fonts

Ya no sólo de Verdana, Trebuchet MS y Times New RomanGeorgia vive el diseñador.

Tan útiles son que existen Google Web Fonts ó Font Squirrel

tenemos CSS3 gradientes
sombras
rounded-corners
... y demás

Como diría Steve:Bum!

tenemos
HTML5

Five things you should know &

Impressive things about it

tenemos Modernizr, jQuery y un montón de plug-ins

Además de otros proyectos interesantes

los siguientes años
no serán más lentos ...

Facilitate your life you must...

(Yoda venía con la presentación y es inamovible)

Acción repetitiva #1:

Un menú con 4 elementos (y 4 links)

<ul id="nav">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

ZenCoding

Acción repetitiva #2:

Iniciar un proyecto / página

¿Cómo se escribía el DOCTYPE?

HTML5 Boilerplate

Initializr

Acción repetitiva #3:

Un sitio con cabecera, sidebar, contenido y footer

div#header+div#sidebar+div#content+div#footer

960 GS

Bootstrap

¡Initializr + Bootstrap!

Tu sitio en 3,5s o menos :O

Acción repetitiva #4:

Colores, elementos relacionados, et al

.example h1 {
  font-family: 'Lobster Two', cursive;
  color: #f5c300;
}
.example h2 {
  border-bottom: 1px solid #999;
}
.example a { color: #f5c300; }
		

LESS + Elements

SASS

Blog post: LESS will obsolete CSS

Una opinión "en contra"

CodeKit ó Less.app

SimpleLESS

Acción repetitiva #5:

Escribir JavaScript

fill = function(container, liquid) {
  if (liquid == null) {
    liquid = "coffee";
  }
  return "Filling the " + container +
  " with " + liquid + "...";
};
		

CoffeeScript

Nota: No apto para principiantes

... unas cuantas más...

Iconic

jsFiddle

CSS3 meets PS

Sobre el futuro

Are you ready for the next stage of web design?

Responsive Web Design

¡GRACIAS!

webux.tumblr.com // @jluna79

Slides en:
http://talks.tuerco.com/web-developer-toolbox/
Creado con: impress.js // Agradecimiento a @illya (por los links)

Use a spacebar or arrow keys to navigate