front vs back: tornando o mundo web mais fácil
TRANSCRIPT
Front vs BackTornando o mundo Web mais fácil
Mariana Lino
● Formada em Sistemas para Internet pela FIAP (Faculdade de Informática e Administração Paulista)
● Pós-Graduada em Gestão de Projetos pela FIT (Faculdade Impacta de Tecnologia)
● Desenvolvedora Web Full Stack desde 2008● Instrutora de Cursos Web – Front e Back-End
História Web
1980 – Suiça / Enquire
Tim Berners-Lee
1989 – Mike Sendall / TIM-MOI
Tim Berners-Lee
1990 – HTTP, HTML, Navegador, Primeiro Servidor HTTP e Web, Páginas do Projeto
Tim Berners-Lee
Divisão Front e Back
Front-EndHTML, CSS e Javascript
Bootstrap, Foundation, Backbone, AngularJS
Back-End
PHP, Ruby, Python, .Net, Java
MySQL, PostgreSQL, MariaDB, SQL Server
Zend, Laravel, Ruby on Rails, Symfony, CakePHP
Divisão Client e Server
send receive
Client Server
receive send
Técnicas Front-End
Meta tags● Author
● Description
● Keywords
● Robots: index, noindex, follow, nofollow, noarchive
● Charset
● Viewport
Meta tags<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="author" content="Erika Sarti"><meta name="description" content="Meta Tags - O que são e como utilizá-las"><meta name="keywords" content="sites, web, desenvolvimento">
Meta tags<meta name="robots" content="index,follow"><meta name="robots" content="noindex,follow"><meta name="robots" content="index,nofollow"><meta name="robots" content="noindex,nofollow"><meta name="robots" content="noarchive">
W3C Validator
htps://validator.w3.org/
Packages Sublime● Emmet● ColorHighlighter● LESS-build
Packages Sublime - Emmet
ul#nav>li.item$*4>a[href=$]{item $} + TAB
<ul id="nav"> <li class="item1"><a href="1">item 1</a></li> <li class="item2"><a href="2">item 2</a></li> <li class="item3"><a href="3">item 3</a></li> <li class="item4"><a href="4">item 4</a></li></ul>
Packages Sublime – Color Highlighter
Packages Sublime – LESS-build● var.less
// COMENTÁRIO NO ARQUIVO LESS@font: 'Roboto', sans-serif;@black: #0000000;@red: #f00;@transparent-gray: rgba(0, 0, 0, 0.7);@images: '../images/';
Packages Sublime – LESS-build● arquivo.less
@import "var.less";#background{ font-family: @font; background-color: @black; color: @red; > div{ background-image: url('@{images}banner-360.jpg'); }}
Packages Sublime – LESS-build● arquivo.css
#background{ font-family: 'Roboto', sans-serif; background-color: #0000000; color: #f00;} #background > div{ background-image: url('../images/banner-360.jpg');}
GruntJS
● CSS Minifier - CSSmin● JS Minifier – Uglify
htp://gruntjs.com/
GruntJS● Package.json
GruntJS● Gruntfile.js
GruntJS - CSSmincssmin: { target: { files: { 'dest/output.css': ['file1.css', 'file2.css'] } }}
GruntJS - Uglifyuglify: { my_target: { files: { 'dest/output.js': ['file1.jss', 'file2.js'] } }}
Obrigada!
htp://marianalino.com.br
htps://facebook.com/mariianaliino
htp://twiter.com/MarianaLino