A Verdade Sobre o 11 de Setembro

Bem, hoje faz 7 anos que ocorreram os ataques a torres gêmeas do World Trade Center, e ainda há pessoas que ainda acham que o culpado desse ataque foi Osama Bin Laden (por falar nisso, por onde anda Osama?). Que isso tudo foi mérito do terrorismo.
É meus amigos, realmente não temos dúvidas que foi terrorismo, mas os verdadeiros terroristas não são os que vocês pensam que são....

Bom como acho que uma imagem vale mais que mil palavras, então um vídeo deve valer bem mais não é?

Esses videos são partes do documentario Zeitgeist, que vocês podem conferir completo aqui.

O vídeo fala da conspiração americana que foi o 11/9. E mostra várias evidências e argumentos provando isso.




O mundo todo é um palco - Parte II do Documentário

parte I:




parte II:




parte III:

Mouse Gestures

Bom, fazia um "tempinho" que não postava nada (só uns 8 meses!!!!!!) então resolvi RESSUSCITAR o BLOG DO COBAIA (enquanto não ressuscito também o site).

E para começar essa nova fase. vou mostrar um complemento do firefox que fiquei louco por ele! Porque ele é muito massa pois com apenas algum movimento do mouse você pode executar comandos como voltar uma página web, ou fechar uma aba, abrir uma nova aba ou um novo documento.. enfim tudo (ou quase) o que vc quiser!!!! Eu estou falando do Mouse Gestures


O Mouse Gestures nada mais é do que uma extensão que intende os 'gestos do mouse'. Com esses gestos você pode fazer o que quiser com o Firefox, como por exemplo voltar, avançar e atualizar as paginas visitadas, abrir a lista de downloads, extenões e temas, adcionar a pagina ao favoritos e tudo o que quiser.

Basta você precionar o botão direito do mouse e movimenta-lo! É muito interessante o modo de se navegar assim, no começo pode ser dificil, mas depois de se acostumar você verá como é legal.

Você pode instalar clicando aqui e aprender a usá-lo clicando aqui

Tudo (ou quase tudo) o que você precisa saber para COMEÇAR em CSS

Bom, eu não vou começar a falar da história do CSS ou falar de todas as cores de todos os padroes, ou todo esse bla bla bla que "certas" pessoas ensinam (ou pensam que estão ensinando alguma coisa dessa forma), então vamos ao que interessa: PRÁTICA!

As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:

1. Importadas ou lincadas;
2. Incorporadas;
3. Inline.

Folha de estilo externa

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .css

Uma folha de estilo externa é ideal p

ara ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando um arquiv

o apenas (o arquivo da folha de estilo).

O arquivo css da folha de estilo extern

a deverá ser lincado ou importado ao documento HTML, dentro da tag <> do documento. A sintaxe geral para lincar uma folha de estilo chamada

estilo.css é mos

trada abaixo.

A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada abaixo:

O browser lerá as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas.

Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser "salvas" com uma extensão .css

Folha de estilo incorporada ou interna

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.

Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo esta incorporada.

As regras de estilo, válidas para o documento, são declaradas na seção <> do documento com a tag de estilo <>, conforme sintaxe mostrada abaixo:


O browser lerá agora as regras de estilo na própria página, e formatará o documento de acordo com elas.

Nota: Um browser ignora normalmente as tags desconhecidas. Isto significa que um browser velho que não suporte estilos, ignorará a tag , mas o conteúdo da tag será mostrado na tela. É possível impedir que um browser velho mostre o conteúdo

da tag, "escondendo-o" através do uso da marcação de comentário do HTML.

Observe a inclusão dos símbolos (fecha comentário) no código acima.

Folha de estilo inline

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML.

Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um elemento.

A sintaxe para aplicar estilo inline é mostrada a seguir:

Agora, as propriedades mais importantes do CSS:

A propriedade font

As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.

As propriedades básicas para fontes e que abordaremos neste tutorial são as listadas abaixo:

• color:...................cor da fonte
• font-family:..........tipo de fonte
• font-size:.............tamanho de fonte
• font-style:............estilo de fonte
• font-variant:.........fontes maiúsculas de menor altura
• font-weight:.........quanto mais escura a fonte é (negrito)
• font:....................maneira abreviada para todas as propriedades

Valores válidos para as propriedades da fonte

• color:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• font-family:
  1. family-name: define-se pelo nome da fonte,
     p. ex:"verdana", "helvetica", "arial", etc.
  2. generic-family: define-se pelo nome genérico,
     p. ex:"serif", "sans-serif", "cursive", etc.
• font-size:
  1. xx-small
  2. x-small
  3. small
  4. medium
  5. large
  6. x-large
  7. xx-large
  8. smaller
  9. larger
  10. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  11. %
• font-style:
  1. normal: fonte normal na vertical
  2. italic: fonte inclinada
  3. oblique:fonte obliqua
• font-variant:
  1. normal: fonte normal
  2. small-caps: transforma em maiúsculas de menor altura
• font-weight:
  1. normal
  2. bold
  3. bolder
  4. lighter
  5. 100
  6. 200
  7. 300
  8. 400
  9. 500
  10. 600
  11. 700
  12. 800
  13. 900

A propriedade text

As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.

As propriedades para textos são as listadas abaixo:

• color.....................cor do texto;
• letter-spacing........espaçamento entre letras;
• word-spacing.........espaçamento entre palavras;
• text-align..............alinhamento do texto;
• text-decoration......decoração do texto;
• text-indent............recuo do texto;
• text-transform.......forma das letras;
• direction...............direção do texto;
• white-space.........como o browser trata os espaços em branco;

Valores válidos para as propriedades do texto

• color:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• letter-spacing:
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
• word-spacing:
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
• text-align:
  1. left: alinha o texto a esquerda
  2. right: alinha o texto a direita
  3. center: alinha o texto no centro
  4. justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
• text-decoration:
  1. none: nenhuma decoração
  2. underline: coloca sublinhado no texto
  3. overline: coloca um sobrelinhado no texto
  4. line-through: coloca uma linha em cima do texto
  5. blink: faz o texto piscar
• text-indent:
  1. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  2. % : porcentagem da largura do elemento pai
• text-transform:
  1. none: texto normal
  2. capitalize: todas as primeiras letras do texto em maiúsculas
  3. uppercase: todas as letras do texto em maiúsculas
  4. lowercase: todas as letras do texto em minúsculas
• direction:
  1. ltr: texto escrito da esquerda para a direita
  2. rtl: texto escrito da direita para a esquerda
• white-space:
  1. normal: os espaços em branco serão ignorados pelo browser
  2. pre: os espaços em branco serão preservados pelo browser
  3. nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <>
  
  

  A propriedade margin
  

  
  

  A propriedade para margens, define um valor para espessura das margens dos elementos HTML.

  As propriedades para margens são as listadas abaixo:

• margin-top..........define a margem superior;
• margin-right........define a margem direita;
• margin-bottom.......define a margem inferior;
• margin-left.........define a margem esquerda;
• margin..............maneira abreviada para todas as margens

Valores válidos para a propriedade margin

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
3. %: porcentagem da largura do elemento pai

:: A propriedade border ::

As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML.

As propriedades para as bordas são as listadas abaixo:

• border-width:................espessura da borda
• border-style:................estilo da borda
• border-color:................cor da borda
• -----------------------------------------
• border-top-width:............espessura da borda superior
• border-top-style:............estilo da borda superior
• border-top-color:............cor da borda superior
• -----------------------------------------
• border-right-width:.........espessura da borda direita
• border-right-style:..........estilo da borda direita
• border-right-color:..........cor da borda direita
• -----------------------------------------
• border-bottom-width:.........espessura da borda inferior
• border-bottom-style:.........estilo da borda inferior
• border-bottom-color:.........cor da borda inferior
• -----------------------------------------
• border-left-width:...........espessura da borda esquerda
• border-left-style:...........estilo da borda esquerda
• border-left-color:...........cor da borda esquerda
• -----------------------------------------
• border-top:...maneira abreviada para todas as propriedades da borda superior
• border-right:..maneira abreviada para todas as propriedades da borda direita
• border-bottom:..maneira abreviada para todas as propriedades da borda inferior
• border-left:..maneira abreviada para todas as propriedades da borda esquerda
• border:.........maneira abreviada para todas as quatro bordas

Valores válidos para as propriedades das bordas

• color:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• style:
  1. none: nenhuma borda
  2. hidden: equivalente a none
  3. dotted: borda pontilhada
  4. dashed: borda tracejada
  5. solid: borda contínua
  6. double: borda dupla
  7. groove: borda entalhada
  8. ridge: borda em ressalto
  9. inset: borda em baixo relevo
  10. outset: borda em alto relevo
• width:
  1. thin: borda fina
  2. medium: borda média
  3. thick: borda grossa
  4. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

A propriedade padding

A propriedade para espaçamentos (alguns traduzem como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.

As propriedades para espaçamentos são as listadas abaixo:

• padding-top..........define a espaçamento superior;
• padding-right........define a espaçamento direita;
• padding-bottom.......define a espaçamento inferior;
• padding-left.........define a espaçamento esquerda;
• padding..............maneira abreviada para todas os espaçamentos

Valores válidos para as propriedades de espaçamento

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
3. %: porcentagem da largura do elemento pai

A propriedade background

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.

As propriedades background são as listadas abaixo:

• background-color............... cor do fundo;
• background-image............. imagem de fundo;
• background-repeat............. maneira como a imagem de fundo é posicionada;
• background-attachment.......se a imagem de fundo "rola" ou não com a tela;
• background-position............como e onde a imagem de fundo é posicionada;
• background........................maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do fundo

• background-color:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
  4. transparente: transparent
• background-image:
  1. URL: url(caminho/imagem.gif)
• background-repeat:
  1. não repete: no-repeat
  2. repete vertical e horizontal: repeat
  3. repete vertical: repeat-y
  4. repete horizontal: repeat-x
• background-attachment:
  1. imagem fixa na tela: fixed
  2. imagem "rola" com a tela: scroll
• background-position:
  1. x-pos y-pos
  2. x-% y-%
  3. top left
  4. top center
  5. top right
  6. center left
  7. center center
  8. center right
  9. bottom left
  10. bottom center
  11. bottom right

A propriedade list

A propriedade list define as características (valores) das listas HTML.

As propriedades list são as listadas abaixo:

• list-style-image............. imagem como marcador da lista;
• list-style-position..........onde o marcador da lista é posicionado;
• list-style-type...............tipo do marcador da lista;
• list-style........................maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do lista

• list-style-image:
  1. none
  2. URL: url(caminho/marcador.gif)
• list-style-position:
  1. outside: marcador fora do alinhamento do texto
  2. inside: marcador alinhado com texto
• list-style-type:
  1. none: sem marcador
  2. disc: círculo (bolinha cheia)
  3. circle: circunferência (bolinha vazia)
  4. square: quadrado cheio
  5. decimal: números 1, 2, 3, 4, ...
  6. decimal-leading-zero
  7. lower-roman: romano minúsculo i, ii, iii, iv, ...
  8. upper-roman: romano maiúsculo I, II, III, IV, ...
  9. lower-alpha: letra minúscula a, b, c, d, ...
  10. upper-alpha: letra maiúscula A, B, C, D, ...
  11. lower-greek
  12. lower-latin
  13. upper-latin
  14. hebrew
  15. armenian
  16. georgian
  17. cjk-ideographic
  18. hiragana
  19. katakana
  20. hiragana-iroha
  21. katakana-iroha

BONUS!

POSITION

O atributo POSITION pode receber três valores:

• absolute: é o único que permite a sobreposição de camadas e com ele você determina uma posição em relação à página que criou e pronto. Posicionamento absoluto;
• relative: esse valor define que o texto terá posições relativas ao resto da página, e com isso ele não pode se sobrepor, mas ainda é capaz de reconhecer alguns atributos interessantes. Posicionamento relativo;
• estatic: determina que ele não reconhecerá nenhum posicionamento especial determinado pelo controle de camadas. Posicionamento estático.

LEFT

Define a distância que a camada vai ficar da borda esquerda do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).

Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".

RIGHT

Define a distância que a camada terá da borda direita do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).

Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".

TOP

Define a distância que a camada terá do topo do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).

Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".

BOTOM

Define a distância que a camada terá da parte inferior do navegador ou do elemento-pai. Pode assumir os valores absolutos, relativos ou auto (automático).

Observação: os valores absolutos aceitam os valores de acordo com a definição de formatos descritos no item "Formatos de tamanho".

Z-INDEX

Determina a ordem de empilhamento dos elementos. Aceita o valor auto (automático) e número, onde quanto maior o valor, mais alta é a camada.

VISIBILITY

Esse estilo é utilizado para ocultar um elemento. Um elemento invisível ainda ocupa espaço na página. Os valores válidos são: visible (visível), hidden (oculto) e inherit (herda o atributo da camada superior, padrão).

OVERFLOW

Determina como vai se comportar o conteúdo da camada quando os seus limites forem menores que o seu conteúdo. Os valores válidos são: visible (visível, redimensiona a camada para apresentar seu conteúdo), hidden (oculta, ignora o conteúdo excedente da camada), scroll (apresenta a barra de rolagem na camada) e auto (apresenta a barra de rolagem para a camada caso seja necessária).

DISPLAY

Identifica quando e se um elemento deve ser exibido:

• block: como um bloco, com quebra de linha antes e depois do elemento. Cria uma nova caixa em relação aos elementos ao redor (valor padrão);
• inline: sem quebra de linha antes e depois do elemento;
• list-item: o mesmo que block, exceto que um marcador list-item é adicionado;
• none: é invisível e não ocupa espaço na página. Desativa a apresentação do elemento em qualquer situação, incluindo os elementos secundários.

Quanto vale seu blog?

Se você é um blogueiro, e sempre quis saber quanto vale seu blog, acesse este site, ele diz qual o preço do seu blog:

http://www.business-opportunities.biz/projects/how-much-is-your-blog-worth/

e aí? seu blog vale muito? da pra comprar um hot-dog na esquina?! HEHE!

Como economizar energia mudando cores do site

Se você fizer algumas mudanças no seu site poderá diminuir o aquecimento global da Terra. Quando você acessa um site com fundo branco e cores claras o consumo de energia do monitor chega a 74watts. Um site com cores mais escuras gera consumo de 59watts. Veja uma paleta de cores para desenvolvimento de sites como baixo consumo de energia (o branco não deve ser usado como cor de fundo)

* #822007 (vermelho oxidado)
* #000000 (preto)
* #b2bbc0 (azul cinza)
* #19472a (verde floresta)
* #3d414c (cobalto)
* #ffffff (branco)

Se o Google mudasse a cor de fundo do site de branco para preto isto representaria uma economia mundial de 3.000 MEGAwatts/hora. Imagine a quantidade de energia que poderia ser economizada se todos os grandes sites fizessem o mesmo

Se você visita muito o Google e gostaria de poupar energia e dinheiro
http://www.jabago.com/language-portugese-black-google

Aqui temos uma tabela de cores e consumo de energia:
White - 74W
Fuchsia - 69W
Yellow - 69W
Aqua - 68W
Silver - 67W
Blue - 65W
Red - 65W
Lime - 63W
Gray - 62W
Olive - 61W
Purple - 61W
Teal - 61W
Green - 60W
Maroon - 60W
Navy - 60W
Black - 59W

Desenvolvedor Analfabeto

A vantagem de ministrar cursos e fazer palestras é o contato com um número grande de profissionais da área. São pessoas diferentes com experiências e conhecimentos diferentes. Não é de hoje que tenho contato com desenvolvedores que ainda usam programas WYSIWYG para levar seus projetos. A idéia dos programas WYSIWYG é fantástica, pena que não funciona direito.

Vai ser difícil haver programas WYSIWYG que faça um código tão bom quanto o código feito na unha. Por conta disso o desenvolvedor tem que corrigir as falhas que o programa acaba plantando, perdendo um bocado de tempo e fazendo com que ele não tenha controle nenhum sobre o próprio código.

Desenvolvedores que usam tais programas ficam simplesmente analfabetos. Ou seja, ele não sabe escrever um simples código HTML porque simplesmente ficou anos desenvolvendo sites no modo VISUAL e não teve contato nenhum com o código gerado. Resultado: desenvolvedores analfabetos e incompletos.
Leia bem: desenvolvedor que não sabe código HTML e CSS, não é desenvolvedor, é apenas um cara que sabe usar uma ferramenta e não sabe resolver problemas concretos. Que desenvolvedor é esse que precisa de um programa WYSIWYG para poder arrumar uma linha de código com defeito?

Costumo dizer para designers para web que bato papo por aqui que designer completo, hoje em dia, tem que saber fazer includes na linguagem que os seus programadores utilizam. Porque? Oras bolas.
O cara vai fazer o design no Photoshop, Illustrator, seja lá o que ele usa (Fireworks não, por favor!), depois, ele ataca XHTML e CSS, deixa o layout do jeito que ele imaginou, sem defeito. Logo após ele cria os includes só para o programador ficar feliz? Claro que não. Ele cria os includes porque assim ele mantém a exatidão do seu layout mesmo depois que sair de sua mão.
Ser designer de web não é só gestalt, teoria das cores e outras coisinhas… É saber HTML/CSS, saber fazer includes em PHP, ASP, PYTHON, RUBY e sei lá o quê. É saber o que é uma variável e se bobear até saber criar um if.

Isso tudo não se faz com perfeição e rapidez usando muletas WYSIWYG. O desenvolvedor fica preso num programa que o faz perder conhecimento. O desenvolvedor fica analfabeto, sem saber o que é e como faz HTML. Sem saber como funciona CSS. E isso faz parte do trabalho dele! Isso é o trabalho dele.

Se você é um destes profissionais, use algum editor de verdade. Aprenda e pratique código na unha. Se alfabetize. Isso te valoriza como profissional, te dá mais conhecimento técnico, ajuda sua empresa, seus colegas de trabalho e valoriza muito o nosso mercado.

fonte: tableless

O Bom e Velho Rock n' Roll!!!!!!!!!

Nossa! Essa banda mostra que liberdade de expressão não tem idade. A banda The Zimmers britânica integrada por 40 pessoas, todas com mais de 90 anos de idade, está causando sensação na internet cantando uma versão do clássico My Generation , dos roqueiros The Who.
E Viva o Bom e Velho Rock n' Roll!!!!!!!!!