HTML/CSS/JS

Fabio Vedovelli


40 anos

desenvolvendo desde 1998




Transição do Flex para HTML






Ambiente Integrado



  • Auto-complete para código
  • Debug
  • Verificação de erros (tempo real e compilação)
  • Inspeção do código
  • Geração da versão para deploy


Flash Builder

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

No Flex


  • Event Bus
  • Data binding
  • Mark up
  • Componentes nativos

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!

html.css.js

By Fabio Vedovelli

Loading comments...

More from Fabio Vedovelli