 |
|
||||
Você está aqui: Cards de Hidrostática |
||
|
||
 Link para compartilhar na Internet ou com seus amigos: |
||
CSS ::: Dicas & Truques ::: Barras de Navegação, Menus e Dropdowns |
Como criar uma barra de navegação horizontal com menu dropdown em HTML e CSS - Menu suspenso usando CSSQuantidade de visualizações: 1136 vezes |
|
Nesta dica mostrarei como podemos usar uma combinação de várias propriedades CSS para criar um menu suspenso, ou seja, uma barra de navegação contendo links normais e também links que, ao passar o mouse, exibe uma lista de sub-menus. O código apresentado neste exemplo é muito útil para estudantes de HTML e CSS, pois apresenta várias propriedades interessantes para melhorar o visual e a usabilidade de suas páginas web. Entre as propriedades CSS usadas na criação deste menu suspenso nós podemos citar overflow, margin, padding, list-style-type, background-color, display, float, text-align, text-decoration, position, min-width e z-index. Note que coloquei o mínimo de código para fazer a barra de menus funcional. Fique à vontade para acrescentar as formatações que você achar interessante. Veja a página HTML e CSS para o exemplo:
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
/* estiliza o elemento <ul> */
ul{
background-color: #e0e0e0;
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
}
/* aplica estilo aos elementos <li> */
li{
float: left;
}
/* aplica estilo aos links e <li> do sub-menu */
li a, .dropdown_linguagens{
display: inline-block;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
/* define o display do <li> de linguagens */
li.linguagens{
display: inline-block;
}
/* aplica estilo ao menu de linguagens */
.menus_linguagens{
display: none;
position: absolute;
background-color: #eceff1;
min-width: 160px;
z-index: 1;
}
/* aplica estilo aos links do sub-menu */
.menus_linguagens a {
padding: 10px 15px;
text-decoration: none;
display: block;
text-align: left;
}
/* exibe o sub-menu ao passar o mouse */
.linguagens:hover .menus_linguagens{
display: block;
}
/* aplica uma cor diferente aos menus ao
passar o mouse */
.menus_linguagens a:hover{
background-color: #cfd8dc;
}
</style>
</head>
<body>
<h1>Exemplo de Barra de Navegação com
Menu Dropdown</h1>
<ul>
<li><a href="index.php">Inicial</a></li>
<li class="linguagens">
<a href="javascript:void(0)" class="dropdown_linguagens">
Linguagens</a>
<div class="menus_linguagens">
<a href="java.php">Java</a>
<a href="python.php">Python</a>
<a href="ruby.php">Ruby</a>
<a href="delphi.php">Delphi</a>
</div>
</li>
</ul>
</body>
</html>
|
Dart ::: Dicas & Truques ::: Aplicativos e Outros |
Como calcular a distância entre dois pontos na terra em DartQuantidade de visualizações: 1882 vezes |
|
Nesta dica mostrarei como calcular a distância em quilômetros entre dois pontos na terra dadas suas latitudes e longitudes. Neste exemplo eu coloquei o valor de 6378.137 para o raio da terra, mas você pode definir para o valor que achar mais adequado. O cálculo usado neste código se baseia na Fórmula de Haversine, que determina a distância do grande círculo entre dois pontos em uma esfera, dadas suas longitudes e latitudes. Veja o código Dart completo:
// Vamos importar a biblioteca dart:io
import "dart:io";
// vamos importar a biblioteca dart:math
import "dart:math";
void main(){
// vamos ler as latitudes e longitudes das duas
// localizações
stdout.write("Informe a primeira latitude: ");
double lat1 = double.parse(stdin.readLineSync());
stdout.write("Informe a primeira longitude: ");
double lon1 = double.parse(stdin.readLineSync());
stdout.write("Informe a segunda latitude: ");
double lat2 = double.parse(stdin.readLineSync());
stdout.write("Informe a segunda longitude: ");
double lon2 = double.parse(stdin.readLineSync());
// vamos calcular a distância entre os dois pontos em Kms
double distancia = calcularDistancia(lat1, lat2, lon1, lon2);
// mostramos o resultado
print("Distância entre os dois pontos: ${distancia} kms");
}
// função que recebe dois pontos na terra e retorna a distância
// entre eles em quilômetros
double calcularDistancia(double lat1,
double lat2, double lon1, double lon2){
double raio_terra = 6378.137; // raio da terra em quilômetros
// o primeiro passo é converter as latitudes e longitudes
// para radianos
lon1 = grausParaRadianos(lon1);
lon2 = grausParaRadianos(lon2);
lat1 = grausParaRadianos(lat1);
lat2 = grausParaRadianos(lat2);
// agora aplicamos a Fórmula de Haversine
double dlon = lon2 - lon1;
double dlat = lat2 - lat1;
double a = pow(sin(dlat / 2), 2) + cos(lat1) * cos(lat2)
* pow(sin(dlon / 2),2);
double c = 2 * asin(sqrt(a));
// e retornamos a distância
return(c * raio_terra);
}
// função que permite converter graus em radianos
double grausParaRadianos(double graus){
return graus * (pi / 180);
}
Ao executar este código Dart nós teremos o seguinte resultado: Informe a primeira latitude: -16.674551 Informe a primeira longitude: -49.303598 Informe a segunda latitude: -15.579321 Informe a segunda longitude: -56.10009 A distância entre os dois pontos é: 736.9183827638687kms Neste exemplo eu calculei a distância entre as cidades de Goiânia-GO e Cuibá-MT. A latitude é a distância ao Equador medida ao longo do meridiano de Greenwich. Esta distância mede-se em graus, podendo variar entre 0o e 90o para Norte(N) ou para Sul(S). A longitude é a distância ao meridiano de Greenwich medida ao longo do Equador. |
VB.NET ::: Fundamentos da Linguagem ::: Estruturas de Controle |
Como usar o condicional If...Then e If...Then...Else em VB.NETQuantidade de visualizações: 18406 vezes |
Uma das estruturas condicionais mais usadas em VB.NET é o If...Then. Esta estrutura avalia uma condição e executa um bloco de códigos baseado no resultado. Veja um exemplo:
Dim valor As Integer = 10
If valor > 9 Then
Console.WriteLine("Valor é maior que 10")
End If
Há casos em que queremos que um bloco de códigos seja também executado caso a condição avaliada retorne um valor falso. Para isso podemos usar a estrutura If...Then...Else. Veja:
Dim valor As Integer = 10
If valor > 10 Then
Console.WriteLine("Valor é maior que 10")
Else
Console.WriteLine("Valor é menor ou igual a 10")
End If
Veja agora como é possível testarmos três condições:
Dim valor As Integer = 10
If valor > 10 Then
Console.WriteLine("Valor é maior que 10")
ElseIf valor < 10 Then
Console.WriteLine("Valor é menor que 10")
Else
Console.WriteLine("Valor é igual a 10")
End If
Todos os testes efetuados em uma estrutura If precisam retornar um valor True ou False. Veja como isso é verdade no trecho de código a seguir:
Dim valor As Integer = 15
If (valor > 10) = True Then
Console.WriteLine("Valor é maior que 10")
End If
Veja que usamos parênteses ao redor da condição para deixar claro a quem ler nosso código, que a condição é testada e só então seu resultado é comparado com a palavra-chave True. Podemos usar mais parênteses. Veja:
Dim valor As Integer = 15
If ((valor > 10) = True) Then
Console.WriteLine("Valor é maior que 10")
End If
O compilador nunca reclama dos parênteses. Podemos usá-los à vontade para tornar o código mais légivel. |
C# ::: Coleções (Collections) ::: List<T> |
Como retornar a quantidade de itens em uma List genérica do C# usando a propriedade CountQuantidade de visualizações: 10315 vezes |
|
Nesta dica mostrarei como podemos retornar o tamanho de uma List do C# usando a propriedade Count. Veja o código C# completo para o exemplo:
using System;
using System.Collections.Generic;
namespace Estudos {
class Principal {
static void Main(string[] args) {
// cria uma List genérica de inteiros
List<int> valores = new List<int>();
// insere valores na lista
valores.Add(4);
valores.Add(2);
valores.Add(87);
valores.Add(23);
// obtém a quantidade de itens na lista
int quant = valores.Count;
Console.WriteLine("A lista contém " + quant + " elementos.");
Console.WriteLine("\nPressione uma tecla para sair...");
Console.ReadKey();
}
}
}
Ao executar este código C# nós teremos o seguinte resultado: A lista contém 4 elementos. |
JavaScript ::: Dicas & Truques ::: Cookies |
Cookies em JavaScript - Como obter o valor de um cookie usando JavaScriptQuantidade de visualizações: 2 vezes |
|
Nesta dica eu mostro como podemos escrever uma função JavaScript chamada obterCookie() que recebe o nome de um cookie e retorna o seu valor. Veja que, se o cookie com o nome informado não existir, o valor null é retornado. Veja o código JavaScript completo, incluindo o código HTML:
<html>
<head>
<title>Estudando JavaScript</title>
<script type="text/javascript">
// função que permite obter um cookie
function obterCookie(nome){
if(document.cookie.length > 0){
c_start = document.cookie.indexOf(nome + "=");
if(c_start != -1){
c_start = c_start + nome.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if(c_end == -1){
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(
c_start, c_end));
}
}
return null;
}
</script>
</head>
<body>
<script type="text/javascript">
// verifica se o cookie "nome_visitante" existe
// e obtém seu valor
var nome_visitante = obterCookie('nome_visitante');
if(nome_visitante != null){
document.writeln("O cookie nome_visitante existe. " +
"Seu valor é: " + nome_visitante);
}
else{
document.writeln("O cookie nome_visitante não existe");
}
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: O cookie nome_visitante existe. Seu valor é: Osmar |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
