HTML/CSS/JS
Fabio Vedovelli
40 anos
desenvolvendo desde 1998
Ambiente de
Desenvolvimento
Não há ambiente integrado (uma IDE) que cubra
todos os aspectos do desenvolvimento
Chrome Dev Tools
Chrome Dev Tools
- Inspecionar marcação HTML
- Inspecionar instruções CSS
- Objetos Javascript
- Breakpoints
- console.log()
- Performance das requisições
- Ciclo de chamadas AJAX
- Informações armazenadas
- Emular telas
Chrome Dev Tools
http://discover-devtools.codeschool.com/
Deploy
Minificação
Sublime Text 2
HTML
Javascript
Javascript
- Validação de formulários
- Toy Language
- AJAX
- jQuery
- Chrome e V8
- Node.js
- Fullstack Javascript
CSS
Componentes
Componentes HTML
- Nativos
- Plugins
- Suite de componentes visuais
Componentes Nativos
Componentes Custom
com ajuda de plugins
Suites de Componentes
- Bootstrap
- Zurb Foundation
- Topcoat
- Pure CSS
Bootstrap
Zurb Foundation
Topcoat
Pure CSS
Produtividade
Produtividade
- Servidor com auto reload de página
- Esqueleto para início de projetos
- Varredura do código a procura de erros
- Gerenciamento de dependências
- Gerenciamento de includes
- Preparação para publicação (deploy)
Ferramentas
- NPM
- Bower
- Yeoman
- Grunt
- Gulp.js
- ...
Tráfego de Dados
Tráfego de Dados
- Webservice REST
- JSON e XML
JSON e XML
Layout Responsivo
Layout Responsivo
Layout Responsivo
- É trabalhoso
- Necessários muitos testes
- browserstack.com
Layout Responsivo
Possível e Desejável
Frameworks
Frameworks
Frameworks
Caixa de ferramentas
- Gerenciamento de rotas
- Comunicação
- Templates
- Componentes
- Separação de responsabilidades
- Validação de dados
- ...
Encerramento
Encerrando
Vantagens
- Desnecessário Flash Player
- Conversa direta com browser
- Muitas opções prontas para uso...
- ... no entanto, ainda customizáveis
- Comunidade muito ativa
- Apoio de empresas gigantes...
- ... mas que não são donas da tecnologia
- Atende de imediato a qualquer device
Obrigado!
Desenvolvimento Frontend
By Fabio Vedovelli
