Upload
yoann-gotthilf
View
325
Download
3
Embed Size (px)
DESCRIPTION
Support de cours pour le développement Web
Citation preview
Web developmentTechnologies and tools
Web technologies overview
AND MORE....
Studied Web technologies
AND MORE....
Bower
« A package manager for the web » http://bower.io/
Bower is a central repository for browser libraries or frameworks (Jquery, Boostrap, AngularJS, ...)
Bower why
• Improve development speed• Track and maintain easily your dependencies• Separate dependencies from your project’s source repository
(Git, CVS, ...)
Bower files
• bower.json : Project informations • Name• Version• Dependencies• Licence, Main file, Private, Etc...
• .bowerrc : Project Bower configuration (optional)• Dependencies directory• Remote repository url• Etc...
Bower commands
• Install Bowernpm install -g bower
• Create bower.jsonbower init
• Install a new Web packagebower install jquerybower install jquery --save (save it in bower.json)
• Update dependencies from bower.json : bower installbower update
Bower exemple
1. Install package :bower install bootstrap --save
2. Add in your index.html : <link rel="stylesheet" href="bower_components/dist/css/bootstrap.css" ><script src="bower_components/dist/js/bootstrap.js"></script>
3. Done !
Grunt
« The JavaScript Task Runner » http://gruntjs.com
Manage all your Web development tasks.(preprocessing, linting, testing, minifying, ...)
Grunt vs Gulp
Grunt• Configuration over code• More mature system• Over 3500 plugins
Gulp• Code over configuration• Steam-based build system• Small and elegant API• Over 700 plugins
Grunt commands
• Install Gruntnpm install –g grunt-cli
• Install pluginnpm install grunt-contrib-uglifynpm install grunt-contrib-uglify --save-dev (save it in package.json)
• Create taskin Gruntfile.js
• Run taskgrunt build
• Run default taskgrunt
Grunt Gruntfile.jsmodule.exports = function(grunt) {
// Project configuration.grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},build: {src: 'src/<%= pkg.name %>.js',dest: 'build/<%= pkg.name %>.min.js'
}}
});
// Load the plugin that provides the "uglify" task.grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).grunt.registerTask('default', ['uglify']);
};
Grunt file format exemples
// Files Object Formatfiles: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
},
// File Compact Formatfiles: {
src: ['src/aa.js', 'src/aaa.js'],dest: 'dest/a.js'
},
// File paternsfiles: {
src: ['src1/*.js', 'src2/**/*.js', 'src3/{,*/}*.js'],dest: 'dest/scripts.js'
},
// File optionsfiles: {
cwd: 'lib/',src: ['**/*.js'],dest: 'build/',ext: '.min.js',
},
LESS
« Less is a CSS pre-processor, meaning that it extends the CSS language, [...] that allow you to make CSS that is more maintainable, themable and extendable. » http://lesscss.org
LESS variables
// Variables@link-color: #428bca; @link-color-hover: darken(@link-color, 10%);
// Usagea.link {
color: @link-color;}
a:hover {color: @link-color-hover;
}
.widget {color: #fff;background: @link-color;
}
LESS mixins
.border-radius (@radius: 5px) {-webkit-border-radius: @radius;
-moz-border-radius: @radius;border-radius: @radius;
}
#header {.border-radius(4px);color: black;
}
.button {.border-radius(6px);
}
LESS nested 1/2
.btn {color: black;.navigation {
font-size: 12px;}.logo {
width: 300px;}&:hover {
color: red;}
}
.btn {color: black;
}.btn .navigation {
font-size: 12px;}.btn .logo {
width: 300px;}
.btn:hover {color:red;
}
LESS nested 2/2
.screencolor {@media screen {
color: green;@media (min-width:768px) {
color: red;}
}@media tv {
color: black;}
}
@media screen {.screencolor {
color: green;}
}@media screen and (min-width: 768px) {
.screencolor {color: red;
}}@media tv {
.screencolor {color: black;
}}
LESS operations
@base: 5%;@filler: @base * 2;@other: @base + @filler;@font-size-base: 12em;
color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;font-size: @font-size-base+2;
LESS functions
http://lesscss.org/functions/
• ceil• svg-gradient• rgba• saturate• ...
LESS guards
.mixin (@a) when (lightness(@a) >= 50%) {background-color: black;
}.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;}.mixin (@a) {
color: @a;}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
.class1 {background-color: black;color: #ddd;
}.class2 {
background-color: white;color: #555;
}