Curso Web Design | Altere um documento com funções do JavaScript

Link to Blog do Curso Web Design - Microcamp SP

Altere um documento com funções do JavaScript

Posted: 06 Jun 2013 06:09 AM PDT

Se você já começou a dar os seu primeiros passos e se interessa por JavaScript, cedo ou tarde deverá conhecer o método getElementById. Ele permite alterar a largura, a altura, as bordas e até a origem de um tag, bastando apenas que ela possua um identificador para que o método possa acessá-la, alterando-a sequencialmente ou mesmo dinamicamente.

A linguagem Javascript possui uma variedade muito grande de objetos, e cada objeto possui seus métodos e ações que lhe atribuem funcionalidades e promovem interatividade em uma pagina da Web.

Dentre estas funcionalidades temos a modificação da estrutura do documento e a forma como ele estará sendo exibido; o que implica na possibilidade de mudança de cores, formatos, alinhamentos, tamanhos, entre outras possibilidades, como mencionamos acima.

Hoje irei demonstrar o uso de um método bastante simples, mas que permitirá mudanças significativas em seu site. Esse método é o GetElementById ("nome do identificador") e style.

Para este tutorial utilizarei o programa Notepad++, mas você pode utilizar o seu editor de códigos favorito sem problema algum.

Vamos começar o nosso tutorial criando um novo documento em html. Faremos isso da forma mais simples possível, sempre lembrando que nossa intenção é somente testar os métodos e, portanto, a parte visual será bem comum, somente para demonstração.

Faça os códigos como na figura 1.0.

Nota: como pode perceber, nosso documento ainda não esta salvo; confira o local onde a seta azul esta apontando na imagem e salve-o no diretório de sua preferência.

1- Entre a linha 4 e 9 reservaremos um espaço para os nossos futuros códigos em JavaScript, já sabendo que este espaço irá ser alterado futuramente.

2- Salve o documento com o nome de metodo.html

3- Em seguida criaremos os elementos que serão usados para manipular os estilos que criaremos via JavaScript.

4- Criaremos dois links para efeito de teste; o primeiro será usado para alterar o estilo do parágrafo que colocaremos no documento, e o segundo será usado para devolver o formato original ao parágrafo.

Veja a criação dos links na fig 1.1 e reproduza-os de forma idêntica:

5- Com os dois links já criados, vamos visualizar no navegador para ver qual é o resultado até este momento.

Nota: os textos indicados pelas setas são os nossos links, o primeiro servirá para alterar a aparência do original e o segundo para devolvê-la ao original, como o próprio texto sugere.

6- Vamos criar o parágrafo que estaremos alterando via JavaScript.

Veja fig 1.3

Nota: Embaixo dos links criamos um parágrafo e lhe atribuiremos o id="paragrafo". Através deste id (que nada mais é do que um identificador), selecionaremos o parágrafo e mudaremos seu estilo.

O texto do parágrafo é esse a seguir:

Mudar estilo pelo javascript é extremamente fácil, desde que se conheça um pouco da linguagem, esse método será trabalhado junto com o método style, que possibilitará aplicar formatação CSS usando uma sintaxe javascript; confira reproduzindo este exemplo.

Obs.: depois de cada texto do nosso parágrafo coloque uma quebra de linha em HTML (<br> )

7 - Após inserir o parágrafo, salve as alterações feitas no Notepad++ e visualize as mudanças no navegador, pressionando a tecla F5 (atualiza) com o navegador aberto para visualizar as mudanças.

Veja o resultado na fig1.4 :

8 – Vamos a criação do nosso script. Na seção JavaScript digite o seguinte comando:

Nota: na frente do instrução function, o texto alterar() é uma referência ao texto que colocamos no evento onclick do primeiro link, veja figura 1.1.

Quando clicarmos sobre o link alterar daremos então partida ao evento onclick que vai chamar a função alterar(), que vai modificar o parágrafo conforme as instruções que passaremos no corpo da função. Caso você ainda não esteja compreendendo o que estamos fazendo, confira o restante do tutorial até o fim e irá perceber que não há nenhum segredo.

9 – Dentro das chaves vamos criar uma variável com o nome alt que vai armazenar o nosso parágrafo acessado via método getElementById("nome_do_id"), veja a fig1.6.

Nota: na linha 6 vemos como podemos acessar um parágrafo pelo seu id usando o método getElementById, dentro das aspas vai o nome do id do parágrafo, veja o nome indicado pela terceira seta da fig1.6.

10 - Com o parágrafo armazenado na variável alt, através do metodo style vamos modificar o seu estilo, veja como na fig 1.7.

Nota: style é um método que vai te permitir aplicar formatações CSS usando JavaScript.

Nosso parágrafo está armazenado na variável alt, sendo assim essa variável representa o parágrafo. O .style quer dizer que podemos aplicar estilo CSS a esse parágrafo, o .fontSize significa a propriedade que estaremos mudando, neste caso o tamanho da fonte, depois, entre aspas colocamos o valor (neste exemplo, 25px). Não esqueça o ponto e vírgula após cada linha de comando.

Obs.: No JavaScript, o ponto (.) serve para acessarmos métodos e propriedades dos objetos ou elementos os quais desejamos mudar, veja o exemplo na fig1.7.

11 - Ate o momento mudamos somente o tamanho da fonte, agora vamos alterar também a sua cor, veja fig 1.8

12 – Visualize o resultado no navegador.

Nota: a fig1.9 mostra o resultado quando é dado um clique sobre o link Alterar estilo conforme mostra a figura acima; embaixo o original e em cima após clicar no link.

13 – Vamos copiar a função que criamos até agora e mudar o nome para devolver e também os valores que modificamos pelo método style, que são fontSize=”25px” e color=” blue”, vamos colocar conforme a figura abaixo:

Nota: veja que mudei somente os valores da propriedade fontSize para "16px" e color para "black";

Confira mais abaixo o final do nosso trabalho!

Através do método getElementById podemos não só acessar tags pelo seu atributo id, mas modificar a forma como ele será exibido no navegador para uma melhor exibição do conteúdo do seu site!

Espero que com este post eu tenha conseguido lançar uma luz sobre o assunto, novos artigos estarão sendo feitos com mais dicas sobre como melhorar a visibilidade de elementos do seu site. Não percam meus próximos posts onde irei mostrar outros métodos JavaScript. E acompanhe o blog dando sugestões sobre assuntos para os próximos posts! Até a próxima!

Como criar um Menu Pop-Up no Fireworks

Posted: 06 Jun 2013 06:01 AM PDT

Que o Fireworks é um programa cheio de recursos, ninguém tem dúvida. Apesar de anunciado recentemente que o programa será descontinuado pela Adobe, ele ainda reserva excelentes recursos e boas surpresas para aqueles que o utilizam na montagem de uma página web. Que tal fazer um Menu Pop Up bonito e funcional em poucos passos? O Blog do Web Design vai te mostrar como!

- Nota do moderador: o post que você irá ler a seguir foi escrito pelo instrutor Elson Lorena, da Microcamp Praia Grande. Você pode conhecer melhor o Elson e entrar em contato com ele no seu perfil do Facebook ou deixando um recado para ele diretamente nos comentários do Blog.

Olá amigos do Blog do Web Design, tudo bem? Hoje vamos falar um pouco sobre um recurso muito importante na realização de uma página da web. É o Menu "Pop-Up". Para quem não conhece, esse menu é um elemento que soluciona o problema de acomodar uma variedade de links em um espaço reduzido. O Fireworks possui uma ferramenta com opções que contém um leque de opções e de aplicações para construirmos esse elemento tão comuns em páginas web.

Importante: para a realização deste tutorial, você deve utilizar a versão CS5 ou superior do programa.

Vamos começar?

Construindo um Botão

Para iniciarmos a construção do nosso Menu, vamos abrir um documento novo (Arquivo > Novo ou use o atalho Control + N) com o tamanho 505×120 pixels, resolução de 96 pixels e fundo Branco.

Com o documento novo criado, vamos preparar um fundo com a ferramenta Retângulo, onde iremos construir um botão que servirá para que o usuário possa passar o cursor do mouse, liberando o efeito.

Desenhe um retângulo com o tamanho de 505×35 pixels. Pinte o Retângulo com a cor que desejar, como você pode ver na imagem abaixo.

Agora desenhe um outro retângulo de tamanho 75×25 pixels e escolha uma cor para ele. Depois, digite um titulo para o botão utilizando a ferramenta Texto. Esse botão dará acesso a primeira página do site que aqui será HOME, como na maioria dos casos.

Crie os demais Botões como na imagem a seguir:

Criando FATIAS

Agora, vamos usar a ferramenta FATIA para criar uma área sensível em cima do botão. Essa ferramenta está na barra lateral do programa, no conjunto de ferramentas Web.

Com a ferramenta, desenhe uma Fatia em cima do Botão Serviço:

Criando o Menu Pop-Up

Após desenhar a fatia, selecione-a e clique no menu Modificar , depois em Menu Pop-Up e logo em seguida na opção Adicionar menu pop-up:

Aparecerá uma janela chamada Editor de menu pop-up. Ela é muito importante porque é com ela que faremos mudanças na estrutura e no visual de nosso menu.

No campo Texto podemos colocar a opção que aparecerá no Pop-Up do botão, já em Link podemos colocar o endereço da Página que abrirá ao ser clicado, e em Destino colocaremos a maneira da página ser aberta (se ela será aberta na mesma página, em uma outra página etc).

Ao clicar em Avançar entraremos na aba Aparência, onde podemos alterar as opções das Células, a Fonte e os Tamanhos. Podemos alterar também o Estado Normal do Botão e o Estado Sobreposto, onde serve para escolher a cor do botão quando o cursor do mouse estiver por cima dele.

Ao clicar em Avançar, entraremos na Aba Avançado, nela poderemos alterar a Largura e Altura das caixinhas do Menu Pop-Up.

Ao clicar em Avançar, entraremos na ultima aba chamado Posição, onde poderemos alterar o local onde aparecerão as opções do Menu Pop-Up.

Pronto. Ao clicar no botão de Concluído, poderemos conferir o resultado de nosso trabalho, ou seja, o nosso Menu Pop-Up. Aperte F12 para visualizar no seu navegador:

Esse processo deverá ser repetido em todos os botões do Menu em que você desejar inserir esse efeito.

Finalizando

Agora você poderá exportar seu documento no formato HTML e colocar as imagens em uma subpasta. Para isso, pressione CTRL+SHIFT+R. Escolha as opções de exportação como você vê na imagem a seguir: Exportar HTML e imagens, Exportar fatias, Página Atual, Incluir áreas sem fatias e colocar imagens em subpasta.

Se seguiu todos os nossos passos demonstrados aqui, seu menu pop-up está funcional e pronto para ser inserido em sua página da web!

Gostou? Você quer outras dicas ou tutoriais sobre Fireworks? Você pode postar os seus comentários e deixar a sua contribuição. Não esqueçam também de curtir e compartilhar com os amigos… O Blog do Web Design agradece. Até o próximo post!

Páginas

quinta-feira, 6 de junho de 2013