Gustin Web pra todos -HTML-CSS-Blogs

Game online (Get the Glass)

noreply@blogger.com (Gustin) — Thu, 29 Jan 2009 01:15:00 +0000

Get the glass é um jogo muito divertido e bem criativo. Dá pra passar horas tentando se livrar da polícia em busca do "copo". Os gráficos são de primeiríssima mas exigem uma conexão mais veloz, de qualquer maneira está ai a dica.
http://www.gettheglass.com/

Dafont.com

noreply@blogger.com (Gustin) — Tue, 27 Jan 2009 23:17:00 +0000

Outro site bacana sobre fontes. O dafont tem uma vasta coleção de diferentes tipos de fontes e um sitema de busca super fácil.Você pode escrever algo e ter uma prévia de como ficará na fonte escolhida. Com destaque para as do tipo "typewriter".
http://www.dafont.com/

Dove Evolution

noreply@blogger.com (Gustin) — Thu, 22 Jan 2009 01:29:00 +0000

Dove Evolution (Paródia)

noreply@blogger.com (Gustin) — Tue, 20 Jan 2009 22:36:00 +0000

Blog Oficial da google

noreply@blogger.com (Gustin) — Sat, 17 Jan 2009 01:41:00 +0000

Blog oficial da google trazendo notícias sobre umas das mais bem sucedidas empresas da atualidade.

Audi Q5 Commercial 2008

noreply@blogger.com (Gustin) — Sat, 17 Jan 2009 01:38:00 +0000

Zune Arts Site de animação

noreply@blogger.com (Gustin) — Fri, 16 Jan 2009 00:42:00 +0000

Zune arts é um site de animação muito bem feitas, vale a pena dar uma conferida.

O endereço é: http://zune-arts.net/

Vectortuts , blog sobre ilustração

noreply@blogger.com (Gustin) — Thu, 15 Jan 2009 23:49:00 +0000

Vectortuts é um blog totalmente voltado para ilustração. Com diversas técnicas e explicações claras sobre o assunto. A maioria do conteúdo é gratuita, trazendo uma vasta lista de tutoriais e video aulas bem explicadas. E se você estiver afim de fazer uma grana extra, o site lhe paga $150,00 pra cada tutorial seu que for publicado.

http://vectortuts.com/

Flash village

noreply@blogger.com (Gustin) — Thu, 15 Jan 2009 08:09:00 +0000

Flash village traz uma variedade de flash templates completamente grátis para downloads. Tem também design de logos, efeitos e imagens. Se estiver iniciando, da pra participar do forum onde você poderá tirar dúvidas. Além disso, na sessão tutorials, você também encontra várias video-aulas que auxiliam no aprendizado do programa. Para fazer os downloads é preciso se tornar membro, mas o cadastro é gratuito.
http://www.flashvillage.com/

CES 2009: Windows 7 Demo

noreply@blogger.com (Gustin) — Tue, 13 Jan 2009 23:13:00 +0000

Validando a sua página

noreply@blogger.com (Gustin) — Sun, 11 Jan 2009 02:13:00 +0000

Isso é sem sombra de dúvidas algo que vocês vão usar bastante, se já não o fazem. O validator do site w3c é uma ferramenta mais do que essencial para todo web designer. Ele permite a verificação do seu código html ou css de acordo com as normas do world wide web consortium. Se houver algum erro na escrita do seu código será apresentado uma página mostrando a localização do erro, o porque do erro e alternativa para a correção. Você pode inserir o seu código direto no site, pode fazer o upload do seu arquivo para verificação, ou pode colocar o endereço do site a ser verificado.

Enderecos:

Para a verificação do seu html entre em: http://validator.w3.org/

E para a verificação do seu css: http://jigsaw.w3.org/css-validator/

Favicon

noreply@blogger.com (Gustin) — Sun, 11 Jan 2009 01:10:00 +0000

Favicon.co.uk é um entre vários sites disponíveis na net que nos auxiliam na criação de favicons. Ele converte suas imagens para o formato .ico, q é o formato aceito para o uso dos favicons e também para o tamanho correto.
Pra quem não sabe favicon é simplesmente aquele ícone que aparece no lado esquerdo do endereço do site (geralmente o logo da empresa, no caso do yahoo a letra "y"). Ele também aparece na sua lista de favoritos facilitando sua procura e também nas abas do seu navegador do lado do nome do site.
Pra gerar o favicon eh muito fácil. Basta você clicar em "browse" na página principal do site e procurar pelo arquivo no seu computador, escolher o tamanho do favicon (32x32 já esta pré-selecionado) e clicar em "generate favicon". Depois disso você vai poder visualizar o seu favicon gerado e para baixa-lo basta clicar em "download your favicon here".
Lembrando que o arquivo tem que se chamar favicon.ico e que ele deve ser colocado na raiz do seu site, ou em outras palavras no mesmo lugar onde estão os seus arquivos html, e nao dentro de qualquer outra pasta.
Pra inseri-lo nas suas páginas basta adcionar o código a seguir entre as tags <head> no codigo html da sua página.

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

O endereço eh: http://www.favicon.co.uk/

Google Chrome : Conheça os recursos do navegador

noreply@blogger.com (Gustin) — Sat, 10 Jan 2009 02:30:00 +0000

Confira o valor do seu site!

noreply@blogger.com (Gustin) — Sat, 10 Jan 2009 01:04:00 +0000

Curioso pra saber quanto o seu site esta valendo no mercado? Entao vocês precisam dar uma olhada nesse site. Aqui da pra ter uma idéia do valor em dólares do seu site ou se você estiver curioso pra saber o quanto valeria o site da google ou aquele outro site que vc gosta é só colocar o endereço completo e pronto.
o site é:
http://www.websiteoutlook.com/

Causos Reais de um Webdesigner - Dando Pitaco

noreply@blogger.com (Gustin) — Fri, 09 Jan 2009 12:45:00 +0000

Video bem bacana contando historias que acontecem com web designers.

Download de Fontes

noreply@blogger.com (Gustin) — Fri, 09 Jan 2009 00:47:00 +0000

O netfontes é um site de download de fontes super bacana. Com uma grande quantidade diferenciada de varios tipos de fontes, vc com certeza vai encontrar aquela fonte ideal pra ser usada no seu projeto. O mais bacana eh qeu da pra inserir o seu texto e ter uma previa de como seria nos varios tipos de fontes disponiveis, vc poder usar por exemplo o nome da sua empresa.

O endereco é: http://www.netfontes.com.br/

Gerador de texto

noreply@blogger.com (Gustin) — Fri, 09 Jan 2009 00:29:00 +0000

Lorem ipsum é nada mais do que simplesmente texto aleatorio. Usado principalmente em "rascunhos" tanto de web pages quanto de media impressa, o texto gerado nesse site funciona para que o designer que ainda nao possui o conteudo do site ou anuncio tenha uma ideia de como o produto final ficara ja com o conteudo.
Em outras palavras, ao inves de vc se matar copiando e colando texto daki e dali no seu projeto, use o gerador de texto nesse site pra conseguir tudo de uma vez. Muito facil de usar, vc pode decidir tanto o numero de paragrafos desejados, ou numero de letras entre outras opcoes.
Super usado por web designer, vai ai essa dica.
o site é:
http://www.lipsum.com/

Sons gratuitos

noreply@blogger.com (Gustin) — Fri, 09 Jan 2009 00:08:00 +0000

O soundsnap.com eh um site de download de sons e "barulinhos" bacanas pra vc q quer inserir em alguma animacao de flash, video ou soh pra ter no seu celular. Os arquivos sao pequenos e estao disponiveis em varios formatos como mp3 e wav.
O mais legal é que vc tem a possibilidade de ouvir o arquivo antes de fazer o download.
O endereco é:
http://www.soundsnap.com/

Acessibilidade Web Parte 2

noreply@blogger.com (Gustin) — Fri, 09 Jan 2009 00:03:00 +0000

Acessibilidade Web parte 1

noreply@blogger.com (Gustin) — Fri, 09 Jan 2009 00:01:00 +0000

Video super bacana sobre acessibilidade web. Parte 1.

Monkeys talk

noreply@blogger.com (Gustin) — Thu, 08 Jan 2009 23:26:00 +0000

Web Developer Add on pra Firefox

noreply@blogger.com (Gustin) — Thu, 08 Jan 2009 02:48:00 +0000

Esse eh um add-on pro browser firefox q nao pode faltar no seu computador. Ele adciona uma barra com diversas funçoes relacionadas a profissao. Vc pode verificar se o site eh compativel com diferente resolucoes de imagem, da pra disabilitar o css do site inteiro, ver onde foram inseridas tabelas, ou onde o alt txt foi colocado, sublinhar imagens q estao no background ou as imagens no site, e da ate pra validar o html ou o css direto da pagina, isso entre outras coisas.
Com certeza esse eh o tipo d add-on q vc baixa e nao descarta logo em seguida, muito util pra qualquer um iteressado no assunto web.

o link eh esse aki:https://addons.mozilla.org/en-US/firefox/addon/60

Expondo o seu trabalho.

noreply@blogger.com (Gustin) — Thu, 08 Jan 2009 01:31:00 +0000

O site de hj se chama deviantart.com. Com uma reputacao alta dentro da comunidade artistica eh um lugar ideal pra se encontrar trabalhos de todo mundo e de exelente qualidade.
Eh tb uma otima janela pra se mostrar trabalhos e conseguir uma grana extra vendendo os seus designs graficos. Da tb pra dar uma olhada no que esta rolando pelo mundo em termos de novidades e tecnicas usadas em photoshop, illustrator e ate flash.
Pra expor os seus arquivos eh necessario se tornar membro do site mas isso eh gratuito e muito simples de se fazer.
Acessem : http://www.deviantart.com/

Pra olhar enquanto o chefe nao estiver na sala!!

noreply@blogger.com (Gustin) — Thu, 08 Jan 2009 01:23:00 +0000

I can has cheezburger eh um blog sobre fotos de gatos com legendas engraçadissimas. Eles ate chegaram ao ponto de criarem uma linguagem totalmente diferente pros bichanos!!
Deem uma olhada pq vale a pena
Site : http://icanhascheezburger.com/

HTML basico

noreply@blogger.com (Gustin) — Thu, 08 Jan 2009 00:05:00 +0000

Hj vou ensinar a construir sua primeira pagina na net. Apesar de ser muito simples, o codigo q vamos ver eh a base pra toda pagina existente.

Vc vai precisar de:
Um editor de texto (sem formatacao, por isso world esta excluido), por exemplo notepad ou textedit.

Um browser pra poder visualisar os resultados : firefox, internet explorer, safari, camino,chrome,opera...

HTML é escrito em ingles americano e nao ingles britanico. A diferenca aparece de vez em quando em palavras que sao soletradas de forma diferente em ambos, por exemplo color e colour.
Quando for salvar o arquivo nao esquecam de salvarem como index.html . O .html no final mostra qual é o tipo de arquivo, o nome index nao eh necessario pois poderia ser chamado de novo.html ou abacaxi.html, mas como geralmente a primeira pagina do seu site é chamada de index é bom comecar a se acostumar.
Lembrem-se sempre que pra tudo que se abre em html tem q haver um final.
Primeiro vamos ver o codigo depois explicarei mais detalhadamente.
Fazam o teste ai, abram o seu editor de texto (mas n usem o world), e coloquem o codigo abaixo.

<html>
<head>
<title>Minha primeira pagina</title>
</head>
<body>
Ola galera, esse eh o meu primeiro teste!!!
</body>
</html>

Agora salvem o arquivo como index.html e abram com um browser. Se tudo der certo vcs estaram vendo a sua primeira pagina!
Eu sei q eh simple mas isso eh soh o comeco.
Eh bom lembrar aki que html funciona num jeito muito simples, lendo as informacao como a gente le de cima pra baixo e da esquerda pra direita, nao se esquecam disso!
Elas sempre comecam com o uso do sinal " < " e terminam com o sinal " > ". O que esta escrito dentro delas eh o que chamamos de tags. Tags descrevem a funcao a ser adotada pelo browser por exemplo as tags <html> e </html> mostram ao browser que esse documento eh do tipo HTML, e as tags e significam "paragrafo", sendo assim tudo dentro dessas tags esta dentro de um paragrafo.

Percebam q sempre que uma tag eh aberta como a tag por exemplo, ela tb precisa ser fechada, pra fazermos isso simplesmente adcionamos uma barra como esta "/" logo depois do sinal < . Entao se a forma aberta do paragrafo eh a forma para fechar sera .

No exemplo acima vimos tb outras tags:
<head>= Ou cabeça do site, aki dentro vai informacoes importantes como por exemplo o titulo do site.
<title> = significa o titulo da pagina, aquilo que aparece la em cima, no caso da minha pagina o meu titulo eh "Gustin web pra todos".
<body>= Ou o corpo da pagina, basicamente eh tudo q vemos num pagina.

Bom, espero q isso tenha esclarecido algumas duvidas, na proxima veremos mais algumas tags importantes pra se iniciar.