 |
|
||||
|
|||||
CSS ::: Dicas & Truques ::: Media Queries |
CSS3 - O que são CSS media queries e como usá-las em suas páginas web para criar designs responsivosQuantidade de visualizações: 1816 vezes |
|
Os desenvolvedores web acostumados com o CSS2 com certeza vão se lembrar das media types e como as usávamos, ou ainda usamos, para definir o tipo de mídia para a qual uma determinada folha de estilo será aplicada. Com media types é possível, por exemplo, oferecer estilos diferentes dependendo se o tipo de mídia for all, screen ou print, ou seja, todos os tipos (all), somente tela (screen), ou impressão (print). O CSS3 trouxe ainda mais comodidade por meio das media queries, que, na verdade, são uma extensão das media types. Com as media queries é possível aplicar uma folha de estilo CSS baseado não somente no tipo de mídia, mas também baseado nas características do navegador web, tais como largura e altura do viewport (a área disponível para exibição dos elementos da página web), a largura e altura do dispositivo, sua orientação e resolução, etc. Veja, por exemplo, como podemos aplicar uma imagem de fundo diferente na página HTML dependendo do tamanho da tela:  E aqui o código completo para a página HTML e as definições CSS:
<html>
<head>
<title>Estudando CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* demais resoluções */
body{
background-image: url("horizontal.jpg");
background-repeat: no-repeat;
}
/* max-width (largura máxima) */
@media screen and (max-width: 600px) {
body{
background-image: url("vertical.jpg");
background-repeat: no-repeat;
}
}
</style>
</head>
<body>
</body>
</html>
Este exemplo é bem simples, mas dará a você uma idéia de como iniciar hoje o mesmo o uso das media queries em CSS. Note que, se a resolução for no máximo 600px, a página terá como fundo a imagem "vertical.jpg". Se a página for aberta em outras resoluções, a imagem de fundo será "horizontal.jpg". Abra o exemplo no seu navegador e experimente redimensionar a janela. Veja como a imagem de fundo é trocada automaticamente ao atingir a resolução que definimos para o atributo max-width da media query. Esta técnica é muito utilizada quando queremos criar uma página web responsiva, ou seja, com design responsivo. |
Python ::: Desafios e Lista de Exercícios Resolvidos ::: Python Básico |
Exercício Resolvido de Python - Como ler um número inteiro e imprimir seu sucessor e seu antecessor em PythonQuantidade de visualizações: 1777 vezes |
|
Pergunta/Tarefa: Escreva um programa Python para ler um número inteiro e imprimir seu sucessor e seu antecessor. O usuário poderá informar um valor positivo ou negativo. Sua saída deverá ser parecida com: Informe um número inteiro: 16 O número informado foi: 16 O antecessor é 15 O sucessor é: 17 Veja a resolução comentada deste exercício usando Python:
# função principal do programa
def main():
# vamos pedir para o usuário informar um número inteiro
numero = int(input("Informe um número inteiro: "))
# vamos calcular o sucessor do número informado
sucessor = numero + 1
# vamos calcular o antecessor do número informado
antecessor = numero - 1
# e agora mostramos os resultados
print("O número informado foi: {0}".format(numero))
print("O antecessor é {0}".format(antecessor))
print("O sucessor é: {0}".format(sucessor))
if __name__== "__main__":
main()
|
Portugol ::: Desafios e Lista de Exercícios Resolvidos ::: Portugol Básico |
Exercícios Resolvidos de Portugol - Como calcular salário líquido em Portugol - Calculando o salário líquido de um professorQuantidade de visualizações: 1900 vezes |
|
Pergunta/Tarefa: Escreva um algoritmo Portugol ou VisuAlg que calcule o salário líquido de um professor. Seu programa deverá solicitar que o usuário informe o valor da hora aula (como real), o número de horas trabalhadas no mês (como inteiro) e o percentual de desconto do INSS (como real). Em seguida mostre o salário líquido. Sua saída deverá ser parecida com: Informe o valor da hora aula: 28 Informe o número de horas trabalhadas no mês: 12 Informe o percentual de desconto do INSS: 8 Salário Bruto: R$ 336,00 Total de Descontos: R$ 26,88 Salário Líquido: R$ 309,12 Veja a resolução comentada deste exercício usando Portugol (na versão Portugol Webstudio):
// Cálculo de Salário Bruto e Líquido em Portugol
programa {
funcao inicio() {
// variáveis usadas para resolver o problema
real valor_hora_aula
inteiro horas_trabalhadas
real percentual_desconto_inss
real salario_bruto
real salario_liquido
real total_desconto
// vamos ler o valor do hora aula
escreva("Informe o valor da hora aula: ")
leia(valor_hora_aula)
// vamos ler o número de horas trabalhadas no mês
escreva("Informe o número de horas trabalhadas no mês: ")
leia(horas_trabalhadas)
// vamos ler o percentual de desconto do INSS
escreva("Informe o percentual de desconto do INSS: ")
leia(percentual_desconto_inss)
// vamos calcular o salário bruto
salario_bruto = valor_hora_aula * horas_trabalhadas
// agora calculamos o total do desconto
total_desconto = (percentual_desconto_inss / 100) * salario_bruto
// finalmente calculamos o salário líquido
salario_liquido = salario_bruto - total_desconto
// mostramos o resultado
escreva("\nSalário Bruto: R$ ", salario_bruto)
escreva("\nTotal de Descontos: R$ ", total_desconto)
escreva("\nSalário Líquido: R$ ", salario_liquido)
}
}
|
Java ::: Dicas & Truques ::: Imagens e Processamento de Imagens |
Manipulação de imagens em Java - Como carregar imagens JPG (JPEG), GIF ou PNG usando o método getImage() da classe ToolkitQuantidade de visualizações: 24180 vezes |
|
O método getImage() da classe Toolkit retorna um objeto da classe Image que obtém informações de imagem (pixels) a partir do caminho informado. Veja que este método não verifica se a imagem informada para o método existe ou se foi carregada com sucesso. Veja mais dicas nesta seção para aprender a realizar tais tarefas. O código abaixo mostra como chamar o método getImage() para carregar uma imagem ao clicar em um botão:
package arquivodecodigos;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Estudos extends JFrame{
private Image imagem = null;
public Estudos() {
super("Estudos Java");
Container c = getContentPane();
c.setLayout(new FlowLayout());
JButton btn = new JButton("Carregar Imagem");
btn.addActionListener(
new ActionListener(){
@Override
public void actionPerformed(ActionEvent e){
// imagem a ser carregada
String minhaImagem = "C:\\estudos_java\\lago.jpg";
// Obtém o Toolkit padrão
Toolkit toolkit =
Toolkit.getDefaultToolkit();
imagem = toolkit.getImage(minhaImagem);
JOptionPane.showMessageDialog(null,
"A imagem foi carregada. Agora é só manipulá-la.");
}
}
);
c.add(btn);
setSize(400, 300);
setVisible(true);
}
public static void main(String args[]){
Estudos app = new Estudos();
app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Ao executar este código nós teremos o seguinte resultado: A imagem foi carregada. Agora é só manipulá-la. |
Nossas 20 dicas & truques de programação mais populares |
Você também poderá gostar das dicas e truques de programação abaixo |
|
JavaScript - JavaScript para iniciantes - Como usar o método escape() para codificar uma frase em JavaScript |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
