Um site de coméricio de ervas para chá.
Com esta pegada o site www.luhsetea.com adotou um estilo de quadrinhos para atrair a atenção do público mais jovem que, normalmente, nutrem um certo preconceito com o chá…
Há personagens para cada grupo de chás vendidos e uma história que abrilhanta a ideia, vale conferir:
Excelente site com dicas simples e diretas de como usar (e criar) com janelas modais no Bootstrap.
Inclui exemplos de modal sobre modal, modal em posições diferentes, com barra de rolagem, entre outras.
Excelente material produzido pelo Prof. Paulo Cézar Stadzisz, do CEFET-PR.
Vale a pena o estudo!
(Apostila UML)
Preloader são aqueles gis animados, tipo a ampulheta do Windows, que acabam sendo muito úteis em aplicações AJAX para alertar o usuário que a requisição está em processo.
Vagando pela rede, encontramos o site preloader.net que oferece vários modelos, muitos formatos, com possibilidade de personalização de cores, fundos etc.
Vale a pena conferir:
O causo:
Para uma campanha de entidade beneficente local nos feita a seguinte encomenda:
Será promovida uma festa beneficente, para a qual serão vendidos ingressos, com o objetivo de adquirir uma ambulância para a entidade. A proposta: Colocar na página inicial do site da entidade uma ambulância em preto e branco e, na medida, que forem sendo vendidos os ingressos, no total de 10 mil, a ambulância vai colorindo-se.
Apesar de extremamente simples, não encontramos algo do tipo em nossas pesquisas, assim vamos à solução:
Usar duas imagens sobrepostas, um PB outra colorida, formatadas via CSS, com alterações dinâmicas via jQuery.
Esta é a imagem inicial, com 0% de preenchimento:
Seguida da função que faz a variação:
function colore() { /*ATENÇÃO: Função não otimizada, para efeitos didáticos! */ //captura o tamanho da imagem: largura=$('#imagem').width(); altura=$('#imagem').height(); //valor (em percentual) do campo: percentual=parseInt($('#valor').val(),10); //valida o dado recebido, se for inválido, assumirá 50(%) if(percentual) { if(percentual<0||percentual>100) {percentual=50;}; } else {percentual=50}; //calcula o tamnho da imagem, conforme o percentual: largura_sobreimagem=parseInt(largura*percentual/100); altura_sobreimagem=parseInt(altura*percentual/100); //atribui o valor à sobreimagem: css_sobreimagem="clip:rect(0px,"+largura_sobreimagem+"px,"+altura_sobreimagem+"px,0px)"; $('#imagem').css({"clip":"rect(0px,"+largura_sobreimagem+"px,"+altura_sobreimagem+"px,0px"}); /* No caso, a sobreimagem varia na vertical e na horizontal, apenas para demonstrar as possibilidades do efeito, na prática, foi usado somente na horizontal para melhor visualização. No estilo acima, a imagem já começa como "meio colorida" apenas para efeito demonstrativo */ }; |
Chegando a este resultado:
Pronto, simples e rápido.
Aqui os arquivos para download: .imagem_sobre_imagem
(A imagem da ambulância é promocional da FIAT/Ducato)
O problema é o seguinte:
Temos uma tabela com dados de pedidos, preenchida dinamicamente com AJAX/PHP/MySQL.
Até aí ok, porém, para facilitar a visualização, pretendemos colorir a linha (cada linha representa um pedido) conforme o valor da célula que contém a informação de estatus do pedido.
Antes da função jQuery, temos:
function colore_tabela() { /* * TEMOS 8 Status possíveis, com sua cores respectivas: * 1-salva; branca * 2-aguardando validação; azul * 3-não validada; amarelo * 4-aguardando aprovação; azul * 5-aprovada; verde * 6-não aprovada; amarelo * 7-cancelada; vermelho * 8-concluida; verde */ $('#t_dados').find('tr').each(function(indice){ switch($(this).children().eq(0).text()) { case 'aguardando validação': case 'aguardando aprovação': $(this).prop('class','info'); break; case 'não validada': case 'não aprovada': $(this).prop('class','warning'); break; case 'aprovada': case 'concluida': $(this).prop('class','success'); break; case 'cancelada': $(this).prop('class','danger'); break; }; }); } |
Foram usadas as classes do Bootstrap 3.0 para tebelas: http://getbootstrap.com/css/#tables-contextual-classes
Após:
Visualização melhorada, com poucos comandos e processamento client-side, certamente uma boa pedida.
Neste caso específico, criamos uma função isolada que é chamada depois da execução do AJAX, porém, caso sua tabela já venha preenchida, podes chamá-la logo ao carregar a página, com esta sugestão (ou mesmo através de função anônima):
$( document ).ready(function(){ colore_tabela(); }); |
Para entender um pouco mais:
Usamos a função .each() para percorrer cada linha da tabela, em seguida, selecionamos com children(), seguido de eq(0) o texto da primeira célula, logo, se quiser alterar qual célula será testada, basta alterar o índice, onde 0 representa a primeira coluna, 1 a segunda e assim por diante.
Até a próxima.
Pense naquela cena de câmera de segurança, onde duas pessoas conversam ao longe, perto delas há um saco de lixo e, pelas imagens (sem som, é claro) pela vibração deste plástico perto, a máquina recria o som e ouvimos a conversa!
Ficção? Não, bem, quase não.
Com esta cena, de baixa qualidade, ainda não é possível extrair o som, porém, quando a imagem apresenta uma qualidade maior, ou é gravada com câmeras de alta qualidade, pesquisadores do MIT conseguiram recriar o som, usando somente as imagens. A tecnologia, ainda experimental, certamente será uma nova arma investigativa em breve.
Mais tecnologia, menos privacidade!
Veja o vídeo para entender melhor:
Este post é fixo, vai sendo completado conforme novas fontes são encontradas, assim, se puder, indique nos comentários os fornecedores de imagens de sua preferência, certamente será de grande ajuda!
Vetores (Vectors):
Possibilita publicar e baixar vetores criados pelos usuários. Até agora gratuito e a maioria das imagens sem royalts.
Grande ideia!
O criador do site mostra em forma de galáxia um mapa da internet mundial, com cada site representando uma estrela e seu tamanho dado pelo número de acessos.
Excelente, simples e direto, vale a pena conferir:
O Site português do jornal Público ostenta o logotipo do periódico, simples e direto, votamos aqui na academia como um dos melhores já vistos pela equipe:
Simples e direto.