Herramientas front

67 %
33 %
Information about Herramientas front
Design

Published on February 4, 2014

Author: borya09

Source: slideshare.net

Description

Herramientas que utilizo a diario como desarrollador front-end, que se han vuelto totalmente imprescindibles en mi día a día.

HERRAMIENTAS FRONT SIN LAS QUE NO PUEDO VIVIR

BORJA ANDRÉS FRONT-END DEVELOPER @borya09 http://es.linkedin.com/in/borjaandres/ http://www.borjaandres.com

“Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.”

package.json { "name": "prueba", "version": "0.0.1", "dependencies": { "express":"3.1.0", "mongoose":"3.4.x", "q":"*" } } comandos $ npm install $ node app.js

GRUNT “The JavaScript Task Runner” Why use a task runner? In one word: automation

GRUNT comandos Gruntfile.js jade: { dist: { files: [{ dest: './dist/', src: '{,*/}*.jade', ext: '.html' }] } } grunt.registerTask('dev', ['jade:dev','compass:dev','livereload‘] ); grunt.registerTask('build', ['jade:dist','uglify','compass:dist'] ); $ grunt dev $ grunt build

GRUNT Plugins disponibles …

BOWER “A package manager for the web”

BOWER bower.json $ bower install { "name": "prueba", "version": "0.0.1", "dependencies": { "angular": "~1.2.0", "jquery": "~2.0.3" } } comandos index.html <script src="bower_components/angular/angular.js"></script> <script src="bower_components/jquery/jquery.js"></script>

“robust, elegant, feature rich template engine for nodejs”

!!! 5 html(lang="en") head title= pageTitle body h1 Jade #container.col if isJade p You are amazing else p Get on it! p. Jade is a terse { } pageTitle: ‘Demo', isJade: true <!DOCTYPE html> <html lang="en"> <head> <title>Demo</title> </head> <body> <h1>Jade</h1> <div id="container" class="col"> <p>You are amazing</p> <p>Jade is a terse </p> </div> </body> </html>

“CSS with superpowers”

$brand-color: rgb(255,0,0) $accent-color: darken($brand-color, 10%) $width: 960px body { width: 940px; } h1 { @import 'constants' body width: $width - 2 * 10px h1 color: $brand-color section h1 color: $accent-color a color: white &:hover color: blue color: red; } section h1 { color: #cc0000; } a { color: white; } a:hover { color: blue; }

“Compass is an open-source CSS Authoring Framework”

@import "compass/reset/utilities" @import "compass/css3/border-radius" +global-reset .btn +border-radius(4px) html, body, div, span, applet, object, iframe, h1, h2, ... { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, … { display: block; } body { line-height: 1; } … .btn{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Herramientas de desarrollo front-end ・ Apuntes al Margen

Para qué sirve realmente Bower, Grunt, Modernizr, Normalize.css, los pre-procesadores de CSS y Yeoman. En qué me va a beneficiar usarlas.
Read more

Herramientas frontend y proceso de diseño web - YouTube

Además luego se abordó el proceso de diseño de u ... Herramientas frontend y proceso de diseño web ... Qué es Front-end y Backend, ...
Read more

Herramientas Front, by Borja para Virtual - YouTube

Herramientas Front, by Borja para Virtual ... Herramientas de Meteor js | Front end developer tools - Duration: 2:46. Alonso Campos 95 views. 2:46
Read more

GitHub - borya09/curso-vsw-herramientas-front: Curso para ...

curso-vsw-herramientas-front - Curso para Virtual Software sobre mis herramientas Front favoritas
Read more

Cómo estar al día con las tecnologías de Front-End - The ...

Cómo estar al día con las tecnologías de Front-End ... front-end es mantenerse actualizado y estar en contacto con las nuevas herramientas, ...
Read more

Herramientas de Galicia S.A. (HEGASA) | FENSTERBAU FRONTALE

Die FENSTERBAU FRONTALE ist die Messe für Fenster, Tür und Fassade | 21. - 24.3.2018 in Nürnberg.
Read more

TopAvanBasD - 3.3.3.1 Herramientas front-end

También conocidas como herramientas de acceso a los datos o herramientas de presentación. El front-end es la parte del software que interactúa con el o ...
Read more

McGus II - 3.3.3.1 Herramientas front-end

También conocidas como herramientas de acceso a los datos o herramientas de presentación. * El front-end es la parte del software que interactúa con el ...
Read more

Tools - Android Apps on Google Play

Tools Hit Snooze See more Alarm clock apps. My Alarm Clock Free . Apalon Apps. Free. Best free alarm clock app for your Android device is now on Google ...
Read more

Menús y barras de herramientas - FrontPage

Las barras de herramientas pueden situarse juntas en la misma fila. Por ejemplo, la barra de herramientas Estándar se encuentra junto a la barra de ...
Read more