Web Design Responsivo
4.6 (40 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
167 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Web Design Responsivo to your Wishlist.

Add to Wishlist

Web Design Responsivo

Aprenda de maneira prática como criar sites responsivos! Com uso de HTML5 E CSS3
4.6 (40 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
167 students enrolled
Created by Emerson Carvalho
Last updated 8/2016
Portuguese
Curiosity Sale
Current price: $10 Original price: $100 Discount: 90% off
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar um layout nos padrões da W3C
  • Criar imagens e mídias flexiveis
  • Aplicar os conceitos de responsividades em sites não responsivo
  • Aplicar conceitos de acessibilidade na web
View Curriculum
Requirements
  • Um razoável conhecimento de marcação HTML e das CSS.
Description

Chegamos a uma época onde o Mobile dita as tendências do desktop. As pessoas são móveis e suas necessidades também. Com isso nunca foi tão importante criar um site que seja otimizado tanto para desktops, tablets ou smartphones. Com o curso de Web Design Responsivo você aprenderá sobre estes conceitos e fundamentos, e também no curso abordaremos a questão da acessibilidade na web e as imagens e mídias flexíveis.

Um curso completo e 100% prático!

Who is the target audience?
  • Para pessoas envolvidas na criação de sites tanto na área de design quanto na de desenvolvimento e programação
  • Profissionais da área de design, familiarizados com as técnicas aqui descritas, contarão com uma valiosa fonte de conhecimento e conceitos para empregar no planejamento das funcionalidades para incrementar em suas aplicações
  • Os iniciantes irão se beneficiar por iniciar seus estudos em uma fonte que aborda as mais modernas técnicas de escrita de código
Students Who Viewed This Course Also Viewed
Curriculum For This Course
31 Lectures
07:39:42
+
Introdução
3 Lectures 38:05

Primeira Aula do curso onde abordamos a história e evolução dos Layouts Web ao longo dos anos, também conheceremos a quem este curso é direcionado.

Preview 09:30

Segunda aula do curso onde abordaremos o inicio da criação de Layouts Responsivos, os mitos mais comuns relacionados ao RWD, entenderemos também o conceito do Mobile First.

Introdução Parte 2
13:43

Terceira aula do curso onde abordaremos a diferença entre Web Design Adaptivo e Responsive Web Design, conheceremos as limitações existentes nos Desktops e Dispositivos Móveis e também falaremos um pouco mais sobre o Mobile First.

Introdução Parte 3
14:52
+
HTML5 e CSS3
2 Lectures 36:35

Nesta aula conheceremos as vantagens de se programar para web usando o HTML5, entenderemos sua estrutura e também o porque da metatag viewport em aplicações responsivas.

HTML5 - Estrutura e Sintaxe
21:33

Nesta aula conheceremos as meta tags antigas, o futuro da metatag viewport e também os métodos de resetar ou normalizar as folhas de estilo. Outro tópico importante da aula é aprender a dar suporte ao Internet Explore 9 e nas versões anteriores.

CSS Reset, Normalize e Suporte ao IE
15:02
+
Media Queries
3 Lectures 50:54

Nesta aula conhecemos a fundo a sintaxe das Media Queries, elemento criado junto a CSS3 que auxilia na construção de aplicações Responsivas.

Anatomia das Media Queries
12:49

Nesta aula teórica entenderemos as funcionalidades de mídia previstas para as Media Queries nas CSS3, sendo elas: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid.

Funcionalidades de Mídia
15:33

Nesta aula aprenderemos os fundamentos das Media Queries, conhecendo o conceito dos Breakpoints e realizando um desafio prático, antes de iniciar a prática do curso.

Fundamentos de Media Queries
22:32
+
Projeto Prático 1
6 Lectures 01:34:37

Na aula de hoje iniciaremos o projeto de construção de uma Aplicação Responsiva utilizando todos os conceitos que aprendemos nas aulas anteriores, tais como, Mobile First e Media Queries.

Preview 09:13

Hoje aprenderemos o principio da Acessibilidade Web, os Outlines são pontos de nosso documento com o objetivo de facilitar a navegação de pessoas que necessitam de tecnologias assistidas.

Entendendo os Outlines do documento HTML5
08:09

Na aula de hoje iniciaremos a estilização da nossa página partindo do Conceito do Mobile First, a aula está recheada de dicas para desenvolvimento de Layouts com uso de imagens no background e alinhamento de figuras independente do viewport.

Iniciando a estilização do nosso projeto
24:31

Na aula de hoje criaremos um widget de Menu Sanfona Responsivo usando apenas o CSS3 na criação do efeito, finalizando assim a nossa aplicação para visualização em Smartphone. A partir da próxima aula iremos definindo as visualizações de acordo com os Breakpoint definidos em nosso Wireframe.

Menu Responsivo com Efeito Sanfona usando apenas CSS3
21:46

Na aula de hoje aprenderemos a criar nossa primeira media query a exatos 30em (480px), nesta aula aprenderemos a esconder e mostrar conteúdos de acordo com o viewport.

Criando um Breackpoint a 30em (480px)
20:29

Na aula de hoje vamos finalizar nossa primeira prática, aplicando assim as definições do nosso projeto a 62.5em (1000px) e a 75em (1200px), lembrando que teremos mais praticas ao longo do curso.

Na próxima aula iremos começar a trabalhar com imagens e mídias flexíveis.

Criando os Breackpoint a 62.5em (1000px) e a 75em (1200px)
10:29
+
Imagens e Mídias Flexíveis
8 Lectures 01:35:12

Na aula de hoje teremos uma breve introdução do conceito das Imagens Responsivas, nela aprenderemos que criar uma regra CSS para esticar e encolher a imagem dependendo da largura da viewport não é a solução completa e eficaz para criação de imagens responsivas e acessíveis.

Introdução as Imagens Responsivas
11:36

Na aula de hoje aprenderemos a otimizar imagens antes de enviar para nosso site ou aplicação. Aprenderemos a teoria e a prática desta ação.

Otimização de Imagens para Web
10:28

Nesta aula aprenderemos a utilizar a técnica do Art Direction para criação de imagens responsivas.

Art Direction
18:33

Hoje vamos aprender a trabalhar com o atributo que veio para tentar solucionar o grande problema de se inserir uma imagem com sentido semântico e responsivo nas aplicações web.

Atributo srcset
11:27

Hoje vamos aprender a trabalhar com o elemento HTML5 Picture que nos auxilia na criação de imagens responsivas para web.

Elemento Picture
09:05

Na aula de hoje iremos aprender e aplicar os conceitos para criação de vídeo responsivos.

Vídeos Responsivos
17:06

Na aula de hoje aprenderemos a deixar de forma responsiva os vídeos de terceiros, tais como os do Youtube e do Vimeo.

Vídeos do Youtube e Vimeo Responsivos
11:53

Nesta aula aplicaremos os conceitos das aulas anteriores de Mídias Flexíveis para criação de um mapa responsivo em nossa aplicação.

Mapas Responsivos
05:04
+
Acessibilidade na Web
2 Lectures 33:06

Na aula de hoje iremos conhecer algumas recomendações na construções de aplicações acessíveis, este tópico é dividido em duas aulas sobre o assunto.

Recomendações para desenvolver conteúdo acessível na web Parte 1
17:05

Na aula de hoje iremos conhecer mais recomendações na construções de aplicações acessíveis, este tópico é dividido em duas aulas sobre o assunto.

Recomendações para desenvolver conteúdo acessível na web Parte 2
16:01
+
Projeto Final
7 Lectures 01:51:13

Na parte final do nosso curso, iremos praticar todo conteúdo abordado em um sistema que pode inclusive ser base para uma aplicação comercial. Nesta aula iremos estruturar o sistema para entender como funcionará cada sessão.

Projeto Final - Estrutura e template da página
16:02

Nesta aula construiremos o cabeçalho (header) e a navegação principal (nav) do nosso projeto final.

Projeto Final - Cabeçalho e Menu Principal
30:41

Na aula de hoje aprenderemos a configurar um slide show não responsivo para um slide show responsivo.

Projeto Final - Slide Show Responsivo
11:25

Nesta aula complementaremos nosso projeto com um campo de busca responsivo e bem estilizado em nossa aplicação.

Projeto Final - Campo de Busca
12:36

Nesta aula programaremos a área de notícias da index do nosso projeto, neste momento apenas a versão mobile é criada.

Projeto Final - Área de Notícias
15:49

Nesta Aula criaremos as partes finais de nosso projeto que são as áreas de informações complementares e o rodapé.

Projeto Final - Área de Informações e Rodapé
10:37

Ultima aula do curso onde finalizaremos nosso projeto.

Projeto Final - Construção dos ViewPorts
14:03
About the Instructor
Emerson Carvalho
4.7 Average rating
114 Reviews
819 Students
3 Courses
Programador Web

Professor de Informática, programador web e produtor de vídeo aulas para o youtube. Formado em Analise e Desenvolvimento de Sistema, focou seus estudos pós faculdade na área de programação web.

Atualmente ministra palestras, cursos presenciais e a distância, com foco sempre na programação web moderna.

Tem como principal objetivo o crescimento pessoal e profissional, visando sempre o crescimento e amadurecimento de seus conhecimento.