O documento apresenta uma introdução sobre as divisões front-end e back-end na programação web, descrevendo as principais tecnologias de cada área. Também aborda conceitos como meta tags, validação W3C, pacotes do Sublime Text, pré-processadores CSS como LESS e ferramentas de automação como GruntJS.

2. Front vs Back
Tornando o mundo Web mais fácil

3. 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

4. História Web

5. 1980 – Suiça / Enquire
Tim Berners-Lee

6. 1989 – Mike Sendall / TIM-MOI
Tim Berners-Lee

7. 1990 – HTTP, HTML, Navegador, Primeiro
Servidor HTTP e Web, Páginas do Projeto
Tim Berners-Lee

8. Divisão Front e Back

9. Front-End
HTML, CSS e Javascript
Bootstrap, Foundation, Backbone, AngularJS

10. Back-End
PHP, Ruby, Python, .Net, Java
MySQL, PostgreSQL, MariaDB, SQL Server
Zend, Laravel, Ruby on Rails, Symfony, CakePHP

11. Divisão Client e Server

12. send receive
Client Server
receive send

13. Técnicas Front-End

14. Meta tags
●
Author
●
Description
●
Keywords
●
Robots: index, noindex, follow, nofollow, noarchive
●
Charset
●
Viewport

15. 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">

16. 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">

17. W3C Validator
htps://validator.w3.org/

18. Packages Sublime
●
Emmet
●
ColorHighlighter
●
LESS-build

19. 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>

20. Packages Sublime – Color Highlighter

21. 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/';

22. 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');
}
}

23. 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');
}

24. GruntJS
●
CSS Minifier - CSSmin
●
JS Minifier – Uglify
htp://gruntjs.com/

25. GruntJS
●
Package.json

26. GruntJS
●
Gruntfile.js

27. GruntJS - CSSmin
cssmin: {
target: {
files: {
'dest/output.css': ['file1.css','file2.css']
}
}
}

28. GruntJS - Uglify
uglify: {
my_target: {
files: {
'dest/output.js': ['file1.jss','file2.js']
}
}
}

29. Obrigada!
htp://marianalino.com.br
htps://facebook.com/mariianaliino
htp://twiter.com/MarianaLino
marianas2lino@gmail.com