30 de abr de 2018

Criando um Menu para seu Blog [Atualizado] // 2018

Hi People!

Há alguns anos atrás, eu ensinei aqui no blog como criar um menu com o design que você desejar, e como gerar o código html dele para inserir em seu site. Na época, ensinei como fazer tudo isso nos programas Fireworks e Dreamweaver, porém; hoje o Fireworks não existe mais. Então, a partir de agora, farei tutoriais utilizando os programas Adobe Illustrator CS2 e Notepad ++.

1º Passo - Criar o design do menu


Para começar, escolha seu editor de imagens preferido e crie um design simples {ou não :D} para seu menu.

Primeiramente criei um retângulo simples, nas medidas :
W : 143 px
H : 26 px
Y : 0 px {devemos considerar 0 px para que o código HTML5
 que vamos criar mais pra frente funcione}

X : 0 px

Agora basta copiar a forma e colar para criar o formato do menu

Agora basta escolher a fonte preferida e criar os títulos dos links.
Esse é o resultado final com zoom de 200%


Tamanho real do menu {100%}

E agora, vamos ao Notepad ++ criar o código da imagem mapeada e dos mapas dentro de uma estrutura padrão HTML 5 :



Para maiores detalhes sobre esse código, e como eu fiz os cálculos para definir as coordenadas de cada imagem mapeada, visite este post:

Como descobrir e inserir coordenadas para Imagens mapeadas | Criando imagens Mapeadas em HTML 5



E por hoje é tudo, qualquer dúvida deixem nos comentários !


  ..........................
bjssss


27 de abr de 2018

Pequenas Felicidades #222

Hi People!
Esta semana foi muito boa ! 
Pequenas Felicidades é uma blogagem coletiva criada pela Rita Corrêa do blog Botõezinhos!

←←←←←←←←←❤→→→→→→→→→


✓ Terminei o Curso Gratuito de Lógica de Programação do site Softblue e obtive meu certificado !!!
✓ Fiz uma nova assinatura para as postagens do blog, ficou tão kawaiiiiiiiii !!!

* nova assinatura dos posts do blog *
Criada com Inkscape

✓ Fiz crepioca com carne moída, amoooooo !!!

💖💖💖💖💖

E por essa semana foi tudo, vejo vocês na próxima !

 ..........................
bjssss


23 de abr de 2018

Como descobrir e inserir coordenadas para imagens mapeadas | Criando Imagens Mapeadas em HTML 5

Já tentou criar uma imagem mapeada em HTLM 5 e simplesmente perdeu a noção ao tentar descobrir e inserir as coordenadas de uma imagem? Pois neste post eu vou ensinar passo a passo a matemática e a lógica disso tudo, e solucionar seu problema de uma vez por todas !

1º Passo - Entendendo o Plano Cartesiano e como ele se aplica em mapas de imagem HTML 5


Entender como o Plano Cartesiano se aplica em mapas de imagem é fundamental para solucionar todo o problema.

- Imagine o Plano Cartesiano.


Temos o ponto 0, que pode partir em duas direções, x ou y. Em HTML 5 temos que declarar 4 coodenadas para criar um mapa de imagem retangular. Precisamos declarar W, H, X e Y.

W - representa a largura.
H - representa a altura.
X - é o ponto que determina a largura.
Y - é o ponto que determina a altura.

Sendo assim, o que você precisa fazer é declarar de que ponto "y vai até h" e de que ponto "x vai até w".
o.O
Calma que vou explicar melhor abaixo:

Supondo que vamos criar um mapa de 20 px de altura x 40 px de largura :


Neste caso, a largura (W) foi do ponto 0 em (X) até 40px.
ou seja;
W andou até 40 em x.

e

a altura (H) foi do ponto 0 em (Y) até 20px.
ou seja;
H andou até 20 em y.

Assim, os pontos se encontram e formam o retângulo!







2º Passo - Declarando W, H, X e Y no código HTML 5.


Essa é a parte mais simples!

Aqui está um típico código de mapa de imagem!
Em "img src" inserimos o endereço da imagem que será mapeada.
Em "use map" nós linkamos o mapa, inserindo o nome do mapa com uma hastag na frente.
Em "map name", nós damos nome ao mapa, o mesmo nome utilizado na tag anterior. {sem a hastag}
Em "area shape", nós declaramos qual o formato do mapa.
Em "coods", nós iremos inserir os valores das coordenadas do mapa, na ordem já mencionada acima:

W, H, X e Y.

No caso do nosso exemplo de um retângulo de 20px por 40 px, se ele anda do ponto 0 em x até 40 px de w e do ponto 0 em y até 20 px de h; podemos concluir que a declaração será feita assim:

coords="40, 20, 0, 0"

E assim, nossa imagem mapeada está prontaaaa !!!


  ..........................
bjssss


20 de abr de 2018

Pequenas Felicidades #221

Hi People!
Esta semana foi muito boa ! 
Pequenas Felicidades é uma blogagem coletiva criada pela Rita Corrêa do blog Botõezinhos!

←←←←←←←←←❤→→→→→→→→→


Eu, depois do treino X)

✓ Consegui limpar minha caixa de entrada do e-mail principal, hurulll !!!

✓ Zerei minha lista "Assistir mais tarde" do YouTube
✓ Zerei minha lista do Netflix !!!
✓ Fiz a receita de Ambrosia no jogo The Sims 3 !
✓ Fiz uma limpa na minha lista de "seguindo" no Blogloving {restaram apenas 5 blogs! :) }
✓ Terminei o Curso de HTML 5 do canal Node Studio Treinamentos
✓ Terminei o Curso de CSS 3 do canal Node Studio Treinamentos


Filmes da Semana

The Titan
Sakura Card Captor : Clear Card Hen Prologue

  ..........................
bjssss


16 de abr de 2018

Como deixar de Acumular Marcadores no Navegador!

Hi People!!!

Não sei se acontece com vocês, mas eu tenho a tendência de acumular links nos navegadores dos meus dispositivos eletrônicos {socorro} :O. Mas esse é um hábito que eu realmente não gosto de ter, e, para resolver isso, criei técnicas que irei compartilhar com vocês abaixo !

*mas antes, vejam as telas do meu navegador do celular; consegui a proeza de deixar ele completamente limpo :D*



{ que maravilha !!! sem favoritos, sem histórico, sem extensões e sem sites favoritos
=
SEM BAGUNÇAAAAAA !!! }

///////////////////////////////////////////////

Dica de OURO

No navegador do Pc: Manter links salvos apenas na Barra de Marcadores. Mantenha apenas a quantidade links que cabe nesta barra, e não caia na zona de conforto chamada "Outros Marcadores". Ficar salvando links nesta pasta, ou ficar criando sub-pastas para salvar links só irá entulhar seu navegador. Eu me permito apenas uma sub-pasta, que fica bem visível na Barra de Marcadores, e, nesta mesma barra, apenas 8 links! {não foi fácil chegar nessa quantidade !}



///////////////////////////////////////////////


Basicamente, temos 3 tipos de marcadores, e entendê-los pode ser a resposta para conseguir gerenciá-los melhor, e, assim, conseguir acumular menos deles :

- Marcadores fixos
- Marcadores de curta data
- Marcadores de longa data


Marcadores fixos

São aqueles marcadores "precisam" ficar no seu navegador Eternamente, por exemplo:
- Páginas que você visita sempre; todos os dias ou alguns dias na semana, ou toda semana.

Essas esses marcadores Devem ficar salvos, para facilitar sua vida e seu fluxo de trabalho.

Marcadores de Curta Data

São aqueles marcadores que você salva para ler/resolver mais tarde.

Se salvo algum link de curta data no navegador, tento ler/utilizar a informação o mais breve possível, e então deletar o link, o que leva em torno de 3 a 7 dias.

Você pode estipular um limite de tempo para ler e deletar o link também !

Marcadores de Longa Data

São aqueles marcadores que você precisa deixar salvo por um mês ou mais, pois irá ou só poderá lidar com essa informação daqui a algum tempo. Neste caso, o marcador terá que "morar" no seu navegador por um tempo.

Exemplo 1 : Links para acompanhamento de concursos públicos/provas que você participou.
Exemplo 2 : Links para cursos que você está estudando online.

Dica : De tempos em tempos, separe algumas horas do seu dia para fazer uma "faxina geral" no seu navegador, e ler/resolver/utilizar as informações desses links e deletar.


Técnica do "Excluir 10 links do Navegador"

Essa técnica eu utilizo sempre que quero desentulhar meu navegador! Funciona assim : Eu estipulo uma meta pessoal de excluir 10 links no navegador {Pc ou Celular/ou qualquer outro dispositivo ou os Dois de uma vez}, e então separo uma hora do meu dia para cumprir essa meta. Dessa forma, consigo ir aos poucos tendo um navegador mais limpo e prático para visualizar os links que eu realmente preciso!


Basicamente, essas são minhas dicas e técnicas para destralhar os navegadores, boa sorte !


  ..........................
bjssss


13 de abr de 2018

Pequenas Felicidades #220

Hi People!
Esta semana foi muito boa ! 
Pequenas Felicidades é uma blogagem coletiva criada pela Rita Corrêa do blog Botõezinhos!

←←←←←←←←←❤→→→→→→→→→


 Eliminei todos os marcadores do meu navegador do celular !!!
 Terminei de assistir o anime Sakura Card Captors !
 Terminei de assistir a 4ª temporada de The 100
 Utilizei 10 pimentas dedo-de-moça que já estavam murchando aqui em casa, e fiz essa receita aqui !
{Molho de pimenta saboroso que não arde}
 Comecei a utilizar o Plano Gratuito do Spotfy !

Filmes da Semana

O Quarto de Jack

  ..........................
bjssss


6 de abr de 2018

Pequenas Felicidades #219

Hi People!
Esta semana foi muito boa ! 
Pequenas Felicidades é uma blogagem coletiva criada pela Rita Corrêa do blog Botõezinhos!

←←←←←←←←←❤→→→→→→→→→


 Aprendi a tirar água da porta do carro 😄
 Pintei as maçanetas da porta do meu quarto; são pretas e estavam com a tinta toda desgastada !
 Montei um Caderninho de Anotações !!! {estou aperfeiçoando minhas técnicas manuais}







Fotos Esquecidas no Celular #2




  ..........................
bjssss


3 de abr de 2018

1 Ano Sem Comprar Roupas, Acessórios, Calçados e Canetas - 7º Mês

Hi People!

Só me lembrei ontem que deveria ter postado este post no final do mês passado, então vamos lá !

Roupas - Não comprei nenhuma.
Acessórios - Comprei uma nova tela protetora de vidro para o meu celular, pois a minha quebrou !
Calçados - Não comprei nenhum.
Canetas e materiais de papelaria - Não comprei nada!

  ..........................
bjssss


Related Posts Plugin for WordPress, Blogger...
Back to Top