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

marianas2lino@gmail.com