quinta-feira, 19 de março de 2015
domingo, 9 de novembro de 2014
Ferramentas para avaliar o seu blog
Ferramentas para avaliar o seu blog
Boas pessoal, hoje vou disponibilizar alguns ferramentas que uso para avaliar/controlar o meu blog, estas ferramentas de avaliação são bastante úteis para percebermos a que nível as pessoas gostam do conteúdo do nosso blog. Muitos dos leitores, deixam comentários mas a maioria deles lê, gosta e nada comenta, outros publicam nas redes sociais, hoje estarei postando algumas ferramentas para avaliar o seu blog.
Ferramentas para avaliar o seu blog
 |
| Google Analytics- Ferramentas para avaliar o seu blog |
Google Analytics - O google analytics é uma ferramenta para avaliar o seu blog, que todos os criadores de conteúdo deviam possuir. É gratuito e oferecido pelo Google. Nele conseguimos perceber a origem do tráfego, o país das pessoas de origem, as postagens que mais acessam, as palavras-chaves de sucesso, o tempo que as pessoas permanecem no seu blog, taxa de rejeições, etc. É uma ferramenta bastante importante para sabermos como está a evoluir o nosso blog.
 |
| Woorank - Ferramentas para avaliar o seu blog |
Woorank - Woorank, oferece-nos um relatório bastante completo do nosso blog, é deveras uma ferramenta útil para avaliar o nosso blog. depois de digitar-mos o link do nosso blog é dada uma nota do mesmo, e a partir daí é só descobrir o que está correto e o que está errado, podemos ver uma lista de prioridades para o blog. É uma ótima ferramenta para quem trabalha com SEO. Esta é uma ferramenta para avaliar o nosso blog no instante, embora seja paga tem 7 dias grátis.
 |
| Pingdom - Ferramentas para avaliar o seu blog |
Pingdom - Pingdom, é uma ferramenta que serve para avaliar a velocidade com que o nosso blog abre, e depois dá-nos uma informação na qual o nosso blog é superior a outros já testados. Não é uma ferramenta útil para a maioria dos usuários, mas é rápida e eficaz. Por isso esta na nossa postagem Ferramentas para avaliar o seu blog.
 |
| Webmaster Tools - Ferramentas para avaliar o seu blog |
Webmaster Tools - Webmaster tools, é uma ferramenta importante para melhor o SEO do nosso blog. Com ela podemos receber avisos do google sobre: mudanças bruscas no tráfego, erros de rastreamento, etc; identificar correções no HTML; enviar sitemaps; identificar novos links, e muitas mais coisas.
Em suma, hoje disponibilizei uma grande variedade de ferramentas para avaliar o seu blog, espero que com elas consiga aumentar a sua visibilidade no google, até uma próxima aula! Um tutorial de Tuga Design Web - Ferramentas para avaliar o seu blog
terça-feira, 21 de outubro de 2014
[PPT] - Como Fazer Um Jogo
Hey gente, muitas pessoas sonham em criar o seu jogo, e existe várias ferramentas para isso como o Unity 3D, Game Maker, Rpg Maker, etc... Mas nessas ferramentas é necessário saber um pouco de script's e como muitas pessoas são novatas nisso vou ensinar a criar um jogo no PowerPoint.
1º O primeiro passo para o Como fazer um jogo é abrir o PowerPoint e criar uma tela mais ou menos assim.
Neste passo apenas colocámos um background e 2 formas, sabem adicionar formas certo? Adicionamos uma para o Novo Jogo e outra para o Sair.
2º Passo: Depois de criar as formas vamos aplicar-lhe uma função, ou seja, quando estiver o rato sobre o Novo Jogo iniciar o Jogo e quando estiver sobre o Sair fechar o Power Point.
Gente basta seguir os passos como está indicado na figura, seleccionamos a forma do Novo Jogo, vamos a inserir, ação, rato sobre, diapositivo seguinte. Para o Sair basta seguir os mesmos passos só que em vez de ser diapositivo seguinte é terminar apresentação.
3º Passo: Agora vamos fazer com que o rato esteja na posição de partida, para isso usamos outra forma, com o nome de Rato, por exemplo e essa forma deve estar à medida da partida, nessa forma aplicámos o mesmo processo do Novo Jogo, conferir passo 2.
4º Passo: Criar o cenário de Jogo, em todas as formas que colocámos, excepto a Partida e a Meta, devem possuir a ação, rato sobre, terminar apresentação, conferir passo 2.
Depois de ter todas as formas, vamos aplicar-lhe animação, ou seja, movimento. O tutorial como fazer um jogo está quase a terminar.
Viram como coloquei o efeito? Agora é só alterarem o tamanho da seta para que os retângulos não ultrapassem os limites.
5º Passo: Alterar a velocidade dos efeitos e colocar repetição.
Seleccionamos a seta que pretendemos colocar o efeito.
Não se esqueçam de em todos as formas colocar início com o anterior, a velocidade podem aumentar e diminuírem para tornar mais fácil ou mais difícil e repetir até ao fim do diapositivo, tem de fazer isso em todos.
E pronto gente, depois disso é só colocar ação na Meta para o diapositivo seguinte para aparecer Ganhou.
Quem quiser o jogo já feito: https://drive.google.com/file/d/0B4PxrqQbEnecUVRIc2Q3bEhpRDg/edit?usp=sharing
Espero que tenham gostado :3 Mais um tutorial de Tuga Design Web
segunda-feira, 20 de outubro de 2014
Como criar logótipos online
 |
| Como criar logótipos online |
Boas pessoal bem-vindos a mais uma postagem de Tuga Design Web, e desta vez não vamos abordar o tema tutoriais para blog, mas sim, sites onde vocês podem facilmente criar algo para o vosso blog, desde logótipos, citações, etc. Como todos sabem na web existe muitos sites para criar um tipo de letra, exemplo: criar um logótipo tipo Harry Potter.
 |
| Tuga Design Web |
Hoje em dia pode-se fazer na web facilmente o que se faz no photoshop e programas do género a única contrariedade é que vocês podem criar um logótipo e outro pessoa ir lá e criar um igual.
 |
| Imagem Ilustrativa - Design Web |
Na imagem vemos Newton a descobrir a força da gravidade e o despontar de uma nova Lei. Do outro lado, encontramos Steve Jobs a descobrir que o logótipo da maça (apple) pode dar-lhe um enorme lucro. Bem, eu conheço dois sites e utilizo um particularmente que é o: Cooltext, onde você pode encontrar vários logótipos com um design arrojado, e além disso, com apenas uns cliques, definitivamente a Web dá pra tudo. Podem ver aqui alguns logótipos que poderão ser feitos no cooltext:
 |
| Alguns exemplos de logótipos arrojados. - Design Web |
Contudo este site não fica por aqui ele fornece-nos uma quantidade enorme de tipos de letras que podemos usar nos nossos logótipos, ou então, transferir para usar no nosso computador.
 |
| Tipos de letra - Design Web |
.png){kind=spacer} |
| Tuga Design Web |
Com os simples cliques na web isto poderá ser feito, o site em questão é: http://www.picturetopeople.org/
Nele podem encontrar uma grande variedade de tipos de letras:
 |
| Tipos de Letra - Design Web |
 |
| Citação - Design Web |
Quote Image
Bem pessoal, e chegamos ao fim de mais uma postagem de Tuga Design Web, espero que tenham gostado. Não se esqueçam do comentário! Até à próxima aula!
Tuga Design Web
sábado, 18 de outubro de 2014
Como Criar um Blog - A interface do Blog (1ª Aula)
Criando um blog passo a passo - A interface do Blog
Boas pessoal bem-vindos à primeira aula de como criar um blog, sem dúvida que esta é a aula mais secante porque praticamente vocês não aprendem nada, contudo é muito importante para o desenrolar da "série" Como criar um blog.
A primeira coisa que nós vamos fazer é ir ao site blogger, posto isto pressionam em Blogue Novo
 |
| Blogue Novo - Como criar um blog - 1ª Aula |
Posto isto, irá ser apresentada uma janela deste género:
 |
| Título e Endereço do Blog - Como criar um blog - 1ª Aula |
Título - Aqui vocês irão colocar o título do vosso blog, o título deve ter a ver com o tema retratado no blog, ou seja, se vocês criarem postagens sobre futebol, não irão dar um título tipo: agricultura. Mas sim desporto rei ou blog sobre desporto.
Endereço - Aqui é o endereço com que as pessoas encontram o vosso blog, é preferível ser algo simples e fácil de memorizar.
Feito mais um passo da 1ª Aula de Como criar um blog, vamos passar ao próximo.
 |
| Menu Blogger - Como criar um blog - 1ª Aula |
Depois de criarmos um blog, vamos encontrar este menu. Vou explicar sucintamente o que precisamos para já.
Visão Geral - Aqui conseguem acompanhar tudo o que se passa no vosso blog desde, comentários a aguardar pela vossa moderação, comentários publicados, visualizações de hoje, mensagens e seguidores;
Mensagens - Mensagens publicadas no vosso blog;
Páginas - Criar páginas, exemplo: formulário de contato, página sobre do vosso blog;
Comentários - Comentários publicados no Blog;
Estatísticas - Aqui podem ver quantas visualizações tem o vosso blog, de onde provém o tráfego, de que países são as pessoas que vistam vosso blog, etc;
Esquema - Aqui podem adicionar Mini aplicações ao vosso blog;
Modelo - Permite editar HTML do blog, personalizar o vosso blog e efectuar cópias de segurança do mesmo.
Definições - Podem alterar o título do vosso blog, adicionar descrição, alterar o endereço do blog, adicionar mais escritores ao blog, tornar o blog público ou privado, alterar o número de postagens por página, etc.
Primeira aula de como criar um blog de Tuga Design Web.
quarta-feira, 8 de outubro de 2014
Personalizar SideBar - Blogger
Boas, hoje vou ensinar a personalizar a SideBar do nosso blog. Para quem não sabe sidebar é a barra que se encontro à esquerda ou à direita do conteúdo do blog:
Exemplo:
 |
| Esquema do Blog |
Quando nós criámos um blog, e escolhemos um template base a nossa SideBar encontra-se desta forma:
 |
| Sidebar com borda a preto |
Para personalizarmos a nossa sidebar vamos usar a classe aside ao adicionarmos código css dentro dessa classe começamos a personalizar a nossa sidebar.
aside {
}
Agora dentro dos { } é só colocar o nosso código css para personalizarmos a sidebar a nosso gosto. Bem, eu acho que devemos colocar um padding e ele não deve ser eliminado porque dá-nos uma distância para o texto não ficar encostado à borda. Então:
aside {
padding: 20px 5px 20px 5px;
}
A parte adicionada irá dar-nos uma distância entre a borda e o conteúdo, a distância dado no topo e no fim é de 20 px e nas laterais de 5px, podem alterar para se adequar melhor ao seu blog, sendo que o primeiro é a distância em relação ao topo, o segundo em relação à direita, o terceiro ao fim e o quarto à esquerda.
Feito isto podemos adicionar mais coisas, essas serão mencionadas no código abaixo:
aside {
background: rgb(73,192,240); /* Cor de Fundo, pode adicionar imagem deste modo background-image: url("url_da_imagem") */
color: wheat; /* cor do texto */
border-radius: 5px; /* Arredondamento da borda*/
font-size: 12px; /* Tamanho do texto */
padding: 20px 5px 20px 5px;
border: 2px solid black; /* Adiciona uma borda de 2px totalmente preenchida, podem substituir o solid por dashed, dotted, double para efeitos diferentes, e finalmento o black é a cor da borda. Se não quiserem borda removem esta parte. */
}
Feito isto temos a nossa sidebar personalizada, podemos é modificar os links adicionando isto:
aside a:link, aside a:visited {
color: wheat;
text-decoration: none;
}
aside a:hover {
color: black;
text-decoration: none;
}
aside a:link, aside a:visited - Coloca a cor do link e do link visitado wheate retira o sublinhado usando a parte text-decoration: none;
aside a:hover - Coloca a cor do link quando estiver o rato sobre ele preto e retira o sublinhado.
E finalmente para modificar o título da nossa sidebar usamos:
aside h2 {
background-color: rgba(3, 23, 31, 0.16);
padding: 5px;
border: 1px solid rgba(0, 0, 0, 0.17);
text-align: center;
}
Adicionam este código em HTML --> Modelo --> Editar HTML
Pressionam Ctrl + F e pesquisam por ]]></b:skin>
Acima disso coloquem o código que estivemos a desenvolver:
aside {
background: rgb(73,192,240); /* Cor de Fundo, pode adicionar imagem deste modo background-image: url("url_da_imagem") */
color: wheat; /* cor do texto */
border-radius: 5px; /* Arredondamento da borda*/
font-size: 12px; /* Tamanho do texto */
padding: 20px 5px 20px 5px;
border: 2px solid black; /* Adiciona uma borda de 2px totalmente preenchida, podem substituir o solid por dashed, dotted, double para efeitos diferentes, e finalmento o black é a cor da borda. Se não quiserem borda removem esta parte. */
}
aside a:link, aside a:visited {
color: wheat;
text-decoration: none;
}
aside a:hover {
color: black;
text-decoration: none;
}
aside h2 {
background-color: rgba(3, 23, 31, 0.16);
padding: 5px;
border: 1px solid rgba(0, 0, 0, 0.17);
text-align: center;
}
Irá ficar deste modo:
 |
| Sidebar personalizada |
Pronto e hoje aprenderam a personalizar a SideBar, se tiverem alguma dúvida ou não conseguirem personalizar a vossa Sidebar deixem nos comentários que eu irei ajudar. Mais um tutorial de Tuga Design Web!
