Design Responsivo/Adaptativo com Dreamweaver

Design responsivo é empregabilidade, e não é opcional.

Design Responsivo/Adaptativo com Dreamweaver
Design Responsivo/Adaptativo com Dreamweaver

Criar condições ao Web Designer criar e desenvolver Sites que possam ser visualizados e navegados com grande aproveitamento de recursos de cada tipo de dispositivo de acesso à Internet:

  • Navegadores em computadores
  • Navegação em Tablets
  • Navegação em Smartphones


A qualidade do projeto no Web Design Responsivo/Adaptativo está em se criar uma só vez, já se prevendo as diversas possíveis visualizações, sem perda de informação, e trazendo a informação com qualidade de cada "device".

Os profissionais de Web design que conhecem e dominam essa tecnologia e metodologia estão sendo muito procurados!


É necessidade! Websites não responsivos são sistematicamente desprezados pelos usuários e robôs dos Serach Engines, como Google e Bing.

Adobe Dreamweaver

Adobe Dreamweaver

Teoria e prática integradas

Investimento: Sob Consulta

Entre em Contato

São Paulo: (11) 3816-3000
Curitiba: (41) 3287-3000
Brasilia: (61) 3224-3000
Rio de Janeiro: (21) 2543-8704
Espírito Santo: (27) 9 9949-2901

ESCOLHA ONLINE AO VIVO, OU PRESENCIAL.

PARA PRESENCIAL: SELECIONE A UNIDADE ONDE PRETENDE REALIZAR O CURSO

Design Responsivo/Adaptativo com Dreamweaver

Conteúdo programático

  • Introdução ao Design Responsivo

O design para a flexibilidade:
- Múltiplas telas
- “Controle” do pixel
- “Controle” com CSS
- Opções do usuário: tamanho da fonte e zoom da tela
- Unidades relativas
- Exemplos de tamanho de fonte com em e %

Layout estruturado com CSS:
- Posicionamento com propriedade float
- Posicionamento com propriedade position
- Exemplos de caixas posicionadas com em

  • Grids

Importância dos Grids

O que são e para que servem:
- Exemplos (http://delicious.com/analaura/grids)

Grids:
- Exemplos de grid fixo com px
- Exemplos de grid fluido com em e %

Estrutura para grids com HTML5, e seus ganhos:
- article, aside, footer, header, hgroup, nav, section
- details, summary, mark

  • Imagens no Design Adaptativo/Responsivo

Elementos para conteúdo incorporado com HTML5:
- figure, figcaption
- embed, object, video, canvas

Imagens flexíveis

Imagens transparentes

Ajustes para IE6

Propriedades para imagens com CSS3

  • Media queries

O que são

Adobe Dreamweaver CC

Exemplos de como utilizar:
- Alterando apenas texto
- Alterando texto e imagem
- Alterando layout completo

Compatibilidade entre navegadores

  • Outras soluções/frameworks para mobile devices

Dicas sobre desenho para mobilidade (http://bit.ly/rZomMn)

jQueryMobile

Fireworks CSS3 mobile pack

Dreamweaver CC jQuery mobile framework

  • Exercícios de criação de Design Responsivo/Adaptativo
Modelagem

Criação de arquivos externos de CSS e CSS3

Técnicas de migração ao Design Responsivo/Adaptativo

Aplicações e particularizações no Dreamweaver CC

DIFERENCIAIS ENG DTP & Multimídia

  • Os cursos da ENG são sempre com um participante por computador/device
  • Cursos apostilados
  • Certificado Oficial de Conclusão bilíngue
    (Inglês / Português)
  • Projeto-Piloto assistido
  • Prova de Proficiência
  • Para quem atinge 70% ou mais na Prova de Proficiência, emitimos adicionalmente, um Atestado de Proficiência.

Artigos Relacionados

QUER SABER MAIS SOBRE A TECNOLOGIA E PROMOÇÕES?

Faça contato conosco, e receba mais informações:

Prvacidade e Proteção de Dados | ENG DTP & Multimídia

ENG DTP & Multimídia - Logo

 

 

ENVIE SEU CONTATO e SEUS COMENTÁRIOS