Principais códigos Html para acentos e caracteres especiais


Algumas letras acentuadas e caracteres e seu código html:

Simbolo

Código HTML

À &#192
Á &#193
 &#194
à &#195
Ç &#199
É &#201
Ê &#202
Ì &#204
Í &#205
Ó &#211
Õ &#213
Ù &#217
Ú &#218
à &#224
á &#225
â &#226
ã &#227
ç &#231
é &#233
ê &#234
ì &#236
í &#237
ò &#242
ó &#243
ô &#244
õ &#245
$ &#36
% &#37
& &#38
&#39
, &#44
&#45
@ &#64
\ &#92
^ &#94
_ &#95
` &#96
| &#124
~ &#126
¡ &#161
§ &#167
¨ &#168
© &#169
ª &#170
« &#171
® &#174
² &#178
³ &#179
´ &#180
¹ &#185

Desenho animado com CSS 3


Prática geral sobre diferentes técnicas de animação CSS, na que realizamos um desenho animado por vários elementos que têm diferentes particularidades.

No presente exercício vamos ver como podemos animar um desenho com CSS 3 em vários pontos, que nos darão uma ideia global das possibilidades das animações CSS E que nos oferecerá uma prática completa das técnicas que vimos até o momento.

Se você desejar, pode começar vendo o resultado final deste exemplo. Mas observe que no momento funciona apenas com Chorme ou Safari. Continue reading “Desenho animado com CSS 3”

Divs invisíveis com JavaScript


Para usar o truque das ‘divs invisíveis’, basta utilizar uma pequena função JavaScript que fará a mágica acontecer.

O que o código realiza, é ocultar uma div que não necessite ser visualizada, dando lugar a uma outra, com base no clique em um link, imagem ou mouseover.

Para isso temos a função JavaScript (existem muitos modos de se realizar essa tarefa), que deve ser colocada entre as tags ‘head’:

JavaScript

function mostraDiv(id,div2)
{
var divstyle = new String();
divstyle = document.getElementById(id).style.display;

var divAux = new String();
divAux = document.getElementById(div2).style.display;

      if (divAux=="block" || divAux == ""){
       document.getElementById(div2).style.display = "none";
    }   

    document.getElementById(id).style.display = "block";
    return false;
}

O que o código está realizando, é uma situação na qual ele verifica se existe uma div já sendo exibida, caso esteja, ele coloca ela como “none” (invisível) e seta a div desejada como “block” (visível). Ao utilizar o block/none ao invés do visibility:hidden/visibility:visible, nós tiramos o espaço alocado para a div que está invisível, tornando-a imperceptível ao usuário que estiver na página.

Para utilizar na sua página, basta incluir o HTML abaixo:

HTML

<a href="#" onclick="displayDiv('teste','teste2')"> </a>
<a href="#" onclick="displayDiv('teste2','teste')"> </a> 

<div id="teste">
  teste
</div>

<div id="teste2" style="display:none;">
  teste2
</div>

Fonte: http://msdn.microsoft.com/pt-br/library/hh475808.aspx

Mudando Imagens com um Clique ou mouseOver


Uma das técnicas bastante utilizadas via JavaScript, é a alteração de alguma imagem quando ela é clicada ou passa por um mouseover.

Uma maneira simples de se fazer isso, é passando como parâmetro de uma função JavaScript um indíce para cada imagem que voce deseja alterar, fazendo com o que o JavaScript encontre qual das imagens devem ser alteradas:

JavaScript

function mudaImagem(i) {    

    if (i == 1) {

        document.getElementById("imagem1").src="imagem1.jpg";

        document.getElementById("imagem2").src="imagem2_not.jpg";    

    } else if (i == 2) {       

        document.getElementById("imagem1").src=" imagem1_not.jpg";        

        document.getElementById("imagem2").src="imagem2.jpg";    

    }

}

O código recebe um índice, com base nisso verifica quais das operações deve realizar. Nesse caso fiz um exemplo alterando duas imagens, quando uma é clicada, a outra muda para uma imagem não selecionada e a imagem clicada, muda para uma imagem selecionada.

Se o seu caso seja apenas de alterar imagens ao longo da página, sem que elas interfiram uma com as outras, basta remover a linha de alteração da segunda imagem de cada operação de mudança.

Para utilizar na sua página, basta incluir o HTML abaixo:

HTML

<a href="#" ><img src="imagem1.jpg" alt="Imagem1" id="imagem1" onclick="mudaImagem(1)"  /></a> 

<a href="#" ><img src="imagem2_not.jpg" alt="Imagem2" id="imagem2" onclick="mudaImagem(2)"  /></a>

Com isso você incializa sua página com uma imagem já como seleciona e uma segunda imagem ainda não selecionada, para poder testar a transição entre ambas.

Fonte: http://msdn.microsoft.com/pt-br/library/hh475801.aspx

PRESENTATION-LEVELS (CSS3)


A informação na web é reutilizada de diversas maneiras. Toda informação publicada é reutilizada por diversos meios de acesso, seja o seu browser, leitor de tela ou robôs de busca. O HTML proporciona essa liberdade para a informação. Por ser uma linguagem muito simples, podemos reutilizar a informação marcada com HTML em diversos meios de acesso. Mas o HTML não cuida da forma com que o usuário vai visualizar a informação em seu dispositivo. O HTML apenas exibe a informação. A maneira que o usuário consome essa informação é diferente em cada um dos meios de acesso e dispositivos. É aí que entra todo o poder do CSS. O CSS formata a informação para que ela possa ser acessível em diversos usar agents (meios de acesso). Se você acessa o site do seu banco pelo monitor de 22’’ da sua casa ou pelo seu celular, a informação tem que aparecer bem organizada em ambos cenários. É o CSS que organiza visualmente essas informações.
Além disso podemos apresentar a informação de diversas formas em um mesmo dispositivo. Por exemplo: você pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das fotos ou ver em forma de slideshow. Podemos levar essas experiências para websites de conteúdo textual também. A especificação de presentation-levels é uma das especificações que levam o usuário a terem conteúdo mostrados de uma outra forma da qual estamos acostumados. É muito útil para apresentações de slides, com efeitos, transições e etc ou qualquer documento que seria mais bem apresentado no formato de apresentação, como uma proposta, documentos técnicos e etc. Continue reading “PRESENTATION-LEVELS (CSS3)”

TUTORIAL CSS3 (CONTINUAÇÃO)


@FONT-FACE

A regra @font-face é utilizada para que você utilize fontes fora do padrão do sistema em seus sites. Para que isso funcione, nós disponibilizamos as fontes necessárias em seu servidor e linkamos estas fontes no arquivo CSS. A sintaxe é bem simples e tem suporte a todos os navegadores, com algumas ressalvas.

@font-face {
font-family: helveticaneue;
src: url(helveticaNeueLTStd-UltLt.otf);
}

Continue reading “TUTORIAL CSS3 (CONTINUAÇÃO)”

PAGED MEDIA (CSS3)


Com certeza você já deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu imprimir o texto para ler off-line, no papel por ser mais confortável ou por ser mais prático quando não se está conectado. Existem vários motivos para que um leitor queira imprimir o conteúdo de um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal motivo era que ler na tela do computador era cansativo. Hoje isso ainda é um problema, mas com o avanço das telas e do aparecimento das tablets no mercado, você consegue passar mais tempo na frente de uma tela lendo grandes quantidades de texto. O problema é que geralmente a organização de páginas e o conteúdo não é exatamente confortável para passarmos horas lendo.
Outro problema comum é que nós desenvolvedores não temos uma maneira fácil de formatar páginas. Na verdade temos, mas é um pouco de gambiarra e claro, não é maneira correta. A especificação de Paged Media traz nos possibilita formatar as páginas, transparências (aqueles “plásticos“ que usamos com retroprojetores) ou até mesmo páginas que serão vistas pelo monitor. Controlaremos suas medidas, tamanhos, margens, quebras de páginas e etc…
Nota: Para você não se confundir, quando digo páginas, quero dizer páginas físicas, de papel, não páginas web, ok? 😉 Continue reading “PAGED MEDIA (CSS3)”