BlueBox

Desenvolvimento de códigos, análises de informação

JS: Introdução

Seg Fev 24, 2014 11:33 am por Pac

Iniciando o Tutorial...


Para quem é direcionado este Tutorial de JavaScript?
Para quem não sabe nada de JavaScript ainda, mas já sabe básico de HTML.

O que é JavaScript?
É uma linguagem utilizada principalmente para auxílio de desenvolvimento de páginas para a Internet.

JavaScript é a mesma coisa que Java?
Não, JavaScript é mais simples que Java. Aprender …

Comentários: 0

Onde coloco o código JavaScript?

Seg Fev 24, 2014 11:32 am por Pac

Mostrar onde se digita o código JavaScript dentro de uma página HTML.
O Código JavaScript fica Entre o <script> e o </script>.
Ficaremos com a seguinte estrutura:


Mostrar onde se digita o código JavaScript dentro de uma página HTML.

Código:
<html>
<body>

<script>

alert("Minha primeira mensagem!")

</script>


Comentários: 0

Buscar
 
 

Resultados por:
 


Rechercher Busca avançada


Você não está conectado. Conecte-se ou registre-se

[CSS] Utilizando Media Queries do CSS

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [CSS] Utilizando Media Queries do CSS em Qui Fev 27, 2014 1:26 pm

Whist

avatar
Membro
Introdução sobre Media Queries


Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

Breve explicação sobre Media Types


As Media Types definem para qual tipo de media o CSS será direcionado.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML é formatado em cada dispositivo é diferente. Logo, o código CSS será diferente para cada um destes dispositivos.
Por exemplo, se você visita um site por um computador, ele não terá a mesma caso você o visite por um dispositivo móvel.
São dispositivos diferentes, com formas totalmente diferentes de navegação.
O exemplo acima é o mais comum. Mesmo assim, existem outras medias que podemos controlar, como por exemplo, impressão.
Abaixo segue uma lista das medias:

  • all: Para todos os dispositivos.
  • braille: Para dispositivos táteis.
  • embossed: Para dispositivos que "imprimem" em braille.
  • handheld: Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.
  • print: Para impressão em papel.
  • projection: Para apresentações, como PowerPoint.
  • screen: Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.
  • speech: Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos "formatar" a voz dos sintetizadores.
  • tty:Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.
  • tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.


Todos os nomes das medias são case-sensitive.

A utilização dessas medias são feitas como o código abaixo:
Código:
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
   <title>Exemplo</title>
 
   <link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />   
 </head>
 
<body>
 
</body>
</html>

Note a tag LINK. Estou linkando um arquivo de CSS, com o nome de estilo.css. Esse código CSS está destinado para funcionar em dispositivos de media HANDHELD, ou seja, aparelhos móveis, celulares com tela pequena ou aparelhos parecidos. Esse CSS não será aplicado por exemplo, quando o usuário visitar o site utilizando um desktop, por exemplo. Para tanto, teríamos que utilizar media SCREEN.

Código:
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />

O Problema


Cada vez mais surgem dispositivos de diversos tamanhos com hardwares bem parecidos com os desktops. Isso faz com que a navegação destes aparelhos tenha uma experiência muito próxima de desktop. Um exemplo atual é o iPhone. Sua tela tem boa qualidade e seu navegador renderiza as páginas como um navegador normal de desktop. Logo, não tem motivo para prepararmos um layout e um CSS com media type HANDHELD para o iPhone. Apesar de ele ser um handheld, ele não trabalha como um. Contudo, ele também não trabalha como um desktop. Mesmo a renderização do MobileSafari sendo identica a de um desktop, o comportamento do usuário e a forma de navegação é diferente. Logo temos um meio termo. Não podemos disponibilizar um CSS para HANDHELD, nem um CSS totalmente SCREEN.

A Solução – Media Queries


As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado.

Código:
<link rel="stylesheet" href="estilo.css" media="screen and (color)" />

Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color.
Logo, este CSS não será aplicado em aparelhos Monocromáticos. Simples, ahn?

Operadores Lógicos


Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores são: notand only.

not irá fazer uma sentença de negação. Por exemplo:

Código:
<link rel="stylesheet" href="estilo.css" media="all and (not color)" />

Sentenção verdadeira para dispositivos monocromáticos.

only irá esconder os estilos de browsers que não reconhecem media queries. Antes da sentença, você coloca o only:

Código:
<link rel="stylesheet" href="estilo.css" media="only screen and (color)" />

É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or.

Código:
<link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />

Media features


Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Veja o exemplo:

Código:
<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />

Estou especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px.

Há uma lista de características que você pode utilizar aqui para selecionar os dispositivos que você quiser.


  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid


As media queries também são case-sensitive.

Não são todos os browsers que suportam media queries. Hoje em dia, isso é muito utilizado para separar o CSS para iPhone. O MobileSafari reconhece essas media queries, o que possibilita que você faça uma versão do CSS para iPhone. Mesmo assim, muitos por aí preferem fazer uma versão do site inteiro para estes dispositivos. Como já conversamos, isso depende das suas necessidades, público e tamanho do site.

Fonte:
Media Types
CSS Aural
Media Queries

Ver perfil do usuário

2 Re: [CSS] Utilizando Media Queries do CSS em Qui Fev 27, 2014 1:50 pm

Engine404

avatar
Developer
Olá!
Obrigado por compartilhar este tutorial no Bluebox!
Eu mesmo não sabia destes código. Será de grande ajuda.


Até!

Ver perfil do usuário http://bluebox.forumeiros.com/

3 Re: [CSS] Utilizando Media Queries do CSS em Qui Fev 27, 2014 2:23 pm

Man

avatar
Membro
Olá,

Obrigado Pelo Conteúdo! Eu sabia de alguns! ^^ .

Até!

Ver perfil do usuário

4 Re: [CSS] Utilizando Media Queries do CSS em Sex Fev 28, 2014 11:26 pm

BlueMan

avatar
Developer
Eu realmente não conhecia esse artifício.
Vou dar uma lida jajá!

Ver perfil do usuário http://bluebox.forumeiros.com

5 Re: [CSS] Utilizando Media Queries do CSS em Sab Mar 01, 2014 10:45 pm

Pac

avatar
Membro
Simplesmente, magnifico eu mesmo nem sábia que existia estes códigos.

Até!

Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum