Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web Design Responsivo

No description
by

Jubileu João Rosário

on 9 July 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web Design Responsivo

Design Web Responsivo
Resolução de Tela
Monitores e A Evolução da Internet Móvel
A Evolução dos Monitores e Suas Resoluções
Grid e Fluid Grid
CSS Media Queries
Skeleton
Simple Grid
Web Design Responsivo
Viaje nesse conceito
Web Design Responsivo
Design Responsivo é um conceito de Web Design que tem a função de fornecer ao usuário uma fácil leitura e navegação com um mínimo de redimensionamento e visionamento
Web Design Responsivo
O Web Design Responsivo trabalha com a resolução da tela.
MAS LÉO E ANDREAS O QUE É RESOLUÇÃO DE TELA?!?!?!?!?!?
Resolução de Imagem
Resolução de imagem significa a quantidade de pixels da imagem.
Quanto maior a resolução, maior a qualidade da imagem.
Resolução de Imagem
Evolução da Internet Móvel
Tipos de Monitores
OLED
LCD
CRT
São telas mais finas e duráveis, por isso são muito comuns em notebooks e computadores de mão.
Muito comuns em notebooks por possuírem um sistema de iluminação que permite que sejam utilizados em qualquer ambiente.
Por ser um monitor de baixo custo, com longa vida útil é muito utilizado em empresas.
Grid
O que é ?
Um grid é uma
grade
composta essencialmente por linhas guias, colunas e margens. Esta rede serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout.
O que é ?
Traduzindo é “Consultas de Mídia”, ou seja, a CSS é capaz de consultar o navegador e verificar em que tipo de mídia ou dispositivo o usuário está usando para acessar um site, permitindo assim, que especifiquemos estilos diferentes para cada tipo de mídia.
Esta consulta ocorre em tempo real, você poderá ver os estilos mudarem no momento em que for redimensionando o seu navegador, além do simples acessar de um site no PC ou no celular.
Fluid Grid
O que é ?

Fluid Grid é uma grid mais as dimensões dela são definidas por porcentagem, em vez de pixels. E com isso Fluid Grid é uma grid responsiva.
O que é ?
Skeleton é uma pequena coleção de arquivos CSS bem organizados que podem ajudar a desenvolver-se rapidamente sites em qualquer tamanho.
Skeleton é constituído em três princípios:
A Responsive Grid Down To Mobile: dimensionamento flexível de um site para tablets e celular.

Fast to Start: É uma ferramenta para o desenvolvimento rápido com as melhores práticas.

Style Agnostic: Ele oferece os mais básicos e belos estilos.
O que é ?
Simple Grid é um conjunto de css criado para desenvolvedores minimalistas.
Simple Grid funciona bem com um layout de 1140px, mas facilmente se adapta a qualquer tamanho de layout por ser responsivo.
Obrigado pela atenção.
Layout Responsivo e Layout Adapitavel
Layout Responsivel
Definição
Independente do dispositivo utilizado, o layout responsivo é capaz de se adaptar e exibir o mesmo conteúdo que você enxerga no seu notebook ou PC.
Layout Adaptavel
Definição

É possível personalizar o design de seu site disponibilizando apenas as informações mais relevantes para cada tipo de dispositivo, seja desktop, tablet ou celular. Possibilitando assim, a exclusão de arquivos que possam dificultar o carregamento em dispositivos móveis e também a configuração para telas sensíveis ao toque.
Aprendizagem de Programador de Computador

Alunos:
Andreas - andreas.cb@hotmail.com
Leonardo H - leo_heckert@hotmail.com
FONTES:

http://pt.wikipedia.org/wiki/Web_Design_Responsivo

http://www.techtudo.com.br/noticias/noticia/2013/07/veja-lista-com-diversos-modelos-e-tamanhos-de-monitores-tvs.html

http://www.tecmundo.com.br/pixel/7529-pixel-o-que-voce-precisa-saber-sobre-ele-.htm

http://www.tecmundo.com.br/lcd/2446-extraia-o-maximo-de-qualidade-do-seu-monitor-lcd.htm

http://thisisdallas.github.io/Simple-Grid/

http://www.getskeleton.com/

http://webforcenetworks.xpg.uol.com.br/evolucao-das-tecnologias-de-internet-movel.html

http://naomiatkinson.com/

http://super-skeleton.mdnw.net

http://alistapart.com/article/fluidgrids/

http://fluidbaselinegrid.com
WAP
A WAP era uma combinação de protocolos que possibilitava um serviço móvel com acesso à internet. Ela não funciona com endereços normais e além disso, as páginas eram minúsculas e sua velocidade muito lenta, o que não agradou muito o público e deixou a desejar também pelo seu valor de custo.
PRIMEIRA GERAÇÃO – 1G
Desenvolvida nos anos 80 e permitia somente a transmissão de voz. Opera na faixa dos 800 MHz e de acordo com dados da Anatel, possui apenas 0,06% do total de acessos de todo o Brasil.
SEGUNDA GERAÇÃO – 2G
As redes utilizam frequências de operação de 900Mhz, 1800Mhz e 1900Mhz. Ambas oferecem segurança, boa qualidade de voz a um baixo custo e suporte a um grande número de serviços, entre eles: SMS, MMS, GPRS entre outros.
TERCEIRA GERAÇÃO – 3G
Passamos a ter velocidades entre 384kbits a 2Mbits e com isso a ênfase pelo trafego de dados estava cada vez mais evidente naqueles anos.Esta funciona através de frequência de rádio, ou seja, possui um longo campo de recepção de sinais, trazendo mais rapidez e conectividade. Com isso tornou-se a conexão rápida em versão mobile, chegando a incríveis 7 Mbps. Podemos encontrá-la em todos os celulares da atualidade.
QUARTA GERAÇÃO – 4G
Ela possui a velocidade aumentada 180 vezes, com isso, torna a 3G uma tecnologia já remota. O 4G chegou ao Brasil, porém especialistas dizem que ainda não é vantajoso embarcar na nova tecnologia. O que as propagandas não revelam é que apenas uma lista limitada de aparelhos funciona com a nova rede e seu alcance é mais curto.
Full transcript