Instalando Automatix2 com apt-get

Instalando Automatix2 no (K,X)Ubuntu 7.10 AMD64, i386 (Gutsy) e breve passos.

1. Passo
   echo "deb http://www.getautomatix.com/apt gutsy main" | sudo tee -a /etc/apt/sources.list
2. Passo
   wget http://www.getautomatix.com/keys/automatix2.key
3. Passo
   gpg --import automatix2.key
4. Passo
   gpg --export --armor E23C5FC3 | sudo apt-key add -
5. Passo
   sudo apt-get update
6. Passo
   sudo apt-get install automatix2

Fonte: http://www.getautomatix.com/

Instalando Mephisto (no windows)

Esquema para instalação do Mephisto no windows.

1. Download Mephisto (http://mephistoblog.com/download) e unzip em seu workspace;
2. Crie um BD com o nome mephisto(ou outro de sua escolha);
3. Copie o database.example.yml para database.yml que está dentro da pasta “config” e edite conforme as configurações do BD;
4. Acesse a pasta da aplicação pelo prompt e execute
   rake db:bootstrap
5. Agora roda a aplicação
   ruby script/server

Zé fi ni, a aplicação está funfando que é um belezinha acesse “http://localhost:3000/” e par ao administrativo “http://localhost:3000/admin” com o user=admin e senha=test

Maiores  dúvidas http://mephisto.stikipad.com/help/show/Installing+Mephisto

Instalando Pidgin Ubuntu Feisty

Para aqueles que como eu gosta de manter os software sempre atualizados, segue um esquema bem simples de instalação do Pidgin 2.0.2-1 no ubuntu Feisty.

1. Baixar arquivos;
   pidgin_2.0.2-1-getdeb1_i386.deb
   pidgin-data_2.0.2-1-getdeb1_all.deb
2. Instalar dependências;
   sudo aptitude install libavahi-compat-howl0 libmeanwhile
3. Instalar arquivos baixados
   sudo dpkg -i pidgin_2.0.2-1~getdeb1_i386.deb pidgin-data_2.0.2-1~getdeb1_all.deb

Basta ir em “Internet > Mensageiro da Internet Pidgin”

Fonte: http://begnu.wordpress.com

Oportunidade de Emprego

A Mídiaweb está a procura de três profissionais que atuem com webstandards para trabalhar em periodo integral na Agência.

Necessário conhecimento intermediário em XHTML/CSS.

Pré-requisitos:
- XHTML semântico;
- CSS (Cascating Style Sheets);
- Noções de Photoshop e/ou Fireworks;

Desejável:
- Ser aficcionado e apaixonado por Interfaces e principalmente webstandards;
- Capacidade de desenvolver trabalho em grupo;

Os candidatos serão submetidos a testes práticos

Currículos com pretensão salarial para curriculos@midiaweb.com.br

OPEN-SOURCE GOD – Lista de 480 aplicações

No site mashable.com/ achei uma lista enorme de aplicações open-source, vale a pena conferir, achei várias que nunca tinha ouvido falar.

Segue uma pequena lista

FrontAccounting – A professional web-based accounting system for ERP chain; written in PHP with use of MySQL.

bbLean – A new version of Blackbox for Windows.

CyGNOME – A nice tool which ports GNOME desktop to Windows.

Sylpheed-Claws – An open source email client with an interface similar to Outlook Express; works as an RSS feed reader too.

Thunderbird – A secure email client with several customization options to fit the user’s needs.

Clique aqui e veja a lista completa.

Instalando RMagick no windows

Bom pessoal, tive alguma dificuldade em instalar RMagick no windows, sempre dava a mensagem “ERROR: While executing gem … (Zlib::BufError) buffer error.”, resolvi usando “gem update --system“, segue o esquema completo.

1. Baixar ( http://rubyforge.org/projects/rmagick/ );
2. Extrair;
3. Instalar (ImageMagick-6.3.5-8-Q8-windows-dll.exe)
4. abri o console e rodar “gem update --system“;
5. Ainda no console entre na pasta onde extraiu o arquivo e rode “gem install rmagick --local“

Onde peguei a dica: http://www.sameshirteveryday.com

Logomarcas no formato de folha

Fundo claro

Fundo escuro

Leia o post completo em http://www.smashingmagazine.com/

Profissão Web Entrevista: René de Paula Jr

Nesta quarta-feira teremos a participação de René de Paula Jr na seção Profissão Web Entrevista.  Na entrevista com René apresentararemos a visão do especialista em projetos interativos sobre a polêmica Web 2.0.

*René de Paula Jr é um especialista em projetos interativos que trabalha com internet desde 1996. Com passagens por grandes agências como AlmapBBDO, AgênciaClick, Wunderman, empresas como Sony e Banco Real e mais recentemente o Yahoo! Brasil, René tem como foco a criação, implantação e manutenção de projetos focados na participação do usuário, na formação de comunidades e na brand experience integrada.

Thiago Melo: O que é a Web 2.0?

René de Paula Jr: Como era a web antes da Web 2.0? Era assim: tinha muito conteúdo para você acessar, mas não passava disso, pois comentar, enriquecer, compartilhar era quase impossível. Se você quisesse publicar alguma coisa na web antiga, tinha que aprender um monte de coisas: HTML, FTP, Photoshop, etc. Se você publicasse seu conteúdo ele ficaria ilhado no seu site esperando que alguém o descobrisse. Era legal, mas faltava alguma coisa.

Sabe o que faltava? Você. Na Web 2.0 você pode comentar, alterar, contribuir e compartilhar com outras pessoas e, o que é mais legal, sem ter que aprender HTML nem nada.

Em suma: Web 2.0, para mim, é a web onde todos têm voz e ninguém tem a última palavra.

Thiago Melo: O termo “Web 2.0” tem sido bastante utilizado para descrever uma segunda geração da web: O colaborativismo e a troca massiva de informações, mas este termo tem gerado inúmeras discussões. Por que as pessoas têm tanta dificuldade em aceitar este termo definindo o mesmo como um “golpe de marketing”?

René de Paula Jr: A resposta é simples: não tenho idéia É claro que dar um nome novo é uma maneira de marketear a história toda, mas que mal há nisso? Se o problema for só o rótulo e o buzz todo, para mim isso não é problema, pelo contrário: acredito que isso alavancou bastante nosso mercado. Se a questão for se há ou não algo novo, eu prefiro deixar que o Yahoo! Respostas responda… com milhões de respostas.

Thiago Melo: Como diretor de produtos do Yahoo! você participou da criação de muitos serviços considerados Web 2.0. Quais foram estes produtos e como você acredita que eles mudaram a forma como as pessoas interagem com a web?

René de Paula Jr: Calma, calma Adoraria ter participado da concepção, gestação e parto de prodígios como o Flickr, Delicious ou mais recentemente do Yahoo! Respostas, mas como esses produtos nascem normalmente lá fora, meu trabalho sempre foi muito mais puericultura do que obstetrícia.

Metáforas grávidas à parte, eu tive a chance de acompanhar o lançamento do Yahoo! Respostas no Brasil (excelente trabalho de Fabio Boucinhas e sua equipe). Foi fascinante, sobretudo pela resposta maravilhosa dos usuários brasileiros. Em pouquíssimo tempo já tínhamos um milhão de respostas, e rapidamente assumimos a vice-liderança mundial no seu uso. Emocionante, mesmo.

Assistindo de camarote como as pessoas utilizam esses serviços, o que me fascina é ver como as pessoas são donas do próprio nariz, como elas se apropriam das ferramentas e fazem com elas o que bem entendem. Criam suas próprias redes sociais, definem quem vê o quê, dão o sentido que bem entendem… Isso é genial, é como se fossemos a personagem do “Apanhador no Campo de Centeio” zelando pelas crianças que brincam livres.

Thiago Melo: Encontramos hoje na web modelos de serviços como a Wikipedia e o Yahoo! Respostas. Qual a sua opinião sobre a relevância das informações postadas nestes serviços?

René de Paula Jr: Uma das disciplinas mais difíceis da área interativa é a humildade. Quando eu finalmente chego à conclusão que entendi o que está acontecendo, os zilhões de usuários dão uma pirueta e me deixam de pernas pro ar. Eu já errei inúmeras vezes e me surpreendi outras tantas, e esse é um dos maiores encantos desse front que escolhi, e é justamente por isso que digo: a minha opinião é o de menos. Em serviços desse tipo, o juízo de valor não é privilégio de iluminados, mas é um direito de cada usuário envolvido. Se eles considerarem aquela informação relevante, não sou eu quem vai impor alguma coisa, não é?

Ok, é claro que existe um sem-número de questões complicadas, tais como veracidade, profundidade, legitimidade, etc., questões que nos perseguem desde que abrimos a boca para grunhir em sociedade, mas se esse saber cooperativo está crescendo tanto, eu tiro o meu chapéu e o saúdo.

Ainda nesse tema Web 2.0 há outras questões que me intrigam:

Colaboração não é a panacéia universal, por três razões:

• Nem todo mundo está disposto a colaborar.
• Quem quer colaborar/produzir/publicar é um minhoquésimo do universo de usuários.
• Nem toda situação melhora com a participação coletiva. Você já pegou um semáforo pifado na Brasil com a Rebouças?

Existem pessoas 2.0? Eu duvido, e explico:

• Pessoas são capazes de coisas bárbaras e de barbáries, é só uma questão de contexto.
• Contexto algum vai fazer as pessoas serem capazes do que não são capazes.
• Ainda nem entendemos a nossa própria versão beta.

Nem tudo o que é novo inova. Explico:

• Inovar é mudar o mundo.
• Muita novidade ou é fogo de palha ou simplesmente não vinga.
• Muitas inovações revolucionárias nasceram de patinhos feios (o Orkut que o diga, ICQ idem).

Pirotecnias técnicas não trazem muita luz. Explico:

• Quem gosta de tecnologia é tecnólogo. O resto da humanidade gosta mesmo é de ser feliz.
• Se olharmos pra técnica, estamos olhando pro dedo que aponta a lua, e não para a lua.
• Se olharmos pra técnica olhamos para o NOSSO dedo, e não pros outros zilhões de dedos que não estão nem aí pra técnica.

Olhando para trás, tudo faz sentido. Mas lá atrás, ninguém poderia imaginar. Explico:

• Muitos projetos que hoje achamos geniais nasceram por serendipity total, quase como crimes préter-intencionais.
• Se tem algo absolutamente imprevisível é o gosto popular: você nunca vai saber porque algo “bombou” ou bombou.
• Cada usuário tem um mouse na mão. Eles são 1 bilhão. Estamos cercados.

Uma última consideração:

Há 10 anos atrás alguém me perguntou como eu me via no futuro. Eu disse: invisível, diluído, desnecessário, porque meu sonho é que no futuro não precisaremos mais de gurus. Well, mais um pouco eu chego lá.

Por: Thiago Melo
Fonte: http://www.profissaoweb.com/

5 Perguntas para 12 Designers

Demorou, mas saiu. Fiquei na esperança de conseguir respostas de mais pessoas, mas não deu. Não tem problema. Os que responderam agradeço bastante e espero que esta listinha sirva de ajuda para outros que estão metidos nessa profissão que eu pelo menos sou apaixonado. A seqüência das respostas é quase aleatória, na tentativa de ser o mais democrático possível.

1. Qual aspecto do design você mais prioriza?
2. Que técnica utiliza com freqüência?
3. Qual o tipo de letra preferido em seus projetos?
4. Que livro de design considera obrigatório?
5. Que site ou revista você lê diariamente?

1. Qual aspecto do design você mais prioriza? voltar

As respostas se dividiram entre o aspecto comunicacional e a funcionalidade, com o Fred misturando os dois e falando em interação. Em todos deu para perceber que o foco no usuário é lei e que o deslumbramento tecnológico já cansou.

Dos que focaram em comunicação:

Simplicidade. Quando mais simples, menor a complicação, melhor usabilidade e acessibilidade. Diego Eis

Comunicação. Usar a comunicação certa para o receptor, que passe a mensagem certa do transmissor. Caetano Neto

Relevância. Design é o dress code de uma peça de comunicação. Se não estiver correto para o público, não vai agradar. Se não agradar, foi inútil. Pense no tiozão na balada: suas roupas podem ser boas, caras e na moda. Se não apelam para o conjunto de referências da galera, serão simplesmente ridículas. Luli Radfahrer

A interação entre as pessoas proporcionada pelo Design. Frederick Van Amstel

E os que focaram em funcionalidade, facilidade de uso e que usaram o bordão “equilíbrio entre forma e função” (o que não torna a sentença menos correta):

Usabilidade e Estética. Parece clichê, mas não dá muito para fugir disso quando se fala em Design. Já que seu conceito é o equilíbrio entre a beleza e funcionalidade, eu procuro sempre focar na beleza da interface sem agredir sua facilidade de uso. Rodrigo Muniz

O usuário (user centered design). Considerando que processo de design é o equilibrio entre forma e função, o objetivo final sempre é o usuário. Henrique Costa

Usabilidade. Para mim a estética, a organização das informações, o conteúdo, os recursos, todos têm que estar a favor da facilidade de uso do site por parte do usuário. Walmar Andrade

Design significa, antes de tudo, projeto. Algo que surge para suprir um objetivo claro. Portanto, design não é arte porque é forma visando função. Resumo da ópera: funcionalidade. Chico Neto

Acessibilidade e Usabilidade. Não tenho tantas habilidades com programas gráficos, mas sempre prezo pela facilidade de uso. Desde a faculdade estudo muito acessibilidade, fazendo testes com deficientes visuais inclusive. Design não é para poucos! Rafael Dourado, eu

Compatibilidade + Usabilidade. Marcelo Glacial

Design não é nada. Funcionalidade é tudo! Quando se trata de internet vejo como aspecto principal do design o êxito do usuário em encontrar o que ele procura, em alcançar o que deseja, enfim, o design tem que tornar possível o objetivo do site numa linguagem visual atraente. […] Tony Conde

A usabilidade como foco principal e busco usar o desenho como a melhor expressão artística do “foco” do trabalho. […] Thiago Bessa

2. Que técnica utiliza com freqüência? voltar

Esta pergunta não foi específica de propósito. Obtive respostas bem interessantes focando na concepção do projeto e outras no seu desenvolvimento de fato. Para os que participaram, não dá para trabalhar com internet e ser preconceituoso nem prepotente, nem viver sem Photoshop. Mas viver sem o IE até que era uma boa.

Primeiro os que focaram na concepção do projeto:

Mente aberta: nunca assumo que sei NADA sobre um cliente, seu público, tendência ou tecnologia. Assim posso perguntar feito uma criança e, em vez de rotular, me fascino. Luli Radfahrer

Me colocar no lugar do usuário quando estou pensando ou mesmo projetando algo novo. Walmar Andrade

Uso da semiótica. Isto está aqui porque refere-se àquilo. E na composição dos trabalhos, vetores. Chico Neto

Etnografia virtual (fóruns de discussão etc), entrevistas, prototipação, testes com usuários… Frederick Van Amstel

Uso com freqüência a técnica de não usar nenhuma técnica e conseguir executar o que vejo que é necessário ao público do site e que também esteja ao gosto do meu cliente! Auehuaeh. Gosto de coisas simples. Estilo os menus dos celulares da nokia! Tony Conde

Mesclagem de algumas delas. A semiótica como principal, mas usando elementos do gestalt, usar a percepção visual como “arma” para prender a atenção do usuário, mas buscando sempre a criação de coisas úteis. “DIGA NÃO AO LIXO NA INTERNET”. Thiago Bessa

Os mais concentrados na execução dos trabalhos:

Image replacement. Seguida de perto pelo global reset hehehe. Mas esse último não conta, já que é padrão. Marcelo Glacial

Na codificação HTML tenho o costume de logo depois de começar o body inserir sempre o link de pular a navegação e ir direto para o conteúdo, ajuda para quem usa leitor de tela. No CSS é a já velha conhecida técnica * {margin:0; padding:0;} para zerar margin e pading de todos elementos para ter homogeneidade nos diversos browsers. Rodrigo Muniz

Técnica? CSS + HTML + JavaScript não obstrusivo, com um pouquinho de técnicas de acessibilidade e uma pitada de SEO… Henrique Costa

Aqueles scripts que transformam o IE6 num browser um pouco melhor como o de :hover e o de png transparente. Rafael Dourado

Particularmente não gosto de usar o global reset. Não me incomodo com as pequenas diferenças entre os navegadores e acredito que fazer design para web é aceitar que o produto final é fluido, podendo ser personalizado, ter o tamanho do texto alterado, áreas bloqueadas etc.

Finalizando com os Visuais, “adobemente” falando:

No Photoshop uso freqüentemente o Filtro ‘Extrac‘ e a ‘Quick Mask‘ para aquela seleções cabeludas, literalmente (em caso de tirar o fundo de uma imagem na parte onde há pêlos). Rodrigo Muniz

Colagem, vetor e edição de foto. Caetano Neto

Gradientes e DropShandows dão uma aparência bem interessante. Não pode abusar para não se tornar muito carregado. Devem ser usados com um certo cuidado. Diego Eis

Degradês e vetorizações. Rafael Dourado

3. Qual o tipo de letra preferido em seus projetos? voltar

Esta pergunta acabou gerando algumas dúvidas e alguns responderam somente em relação às fontes da web como Arial, Verdana e Georgia e outros que abriram mais para as fontes usadas na composição do layout. Minha intenção era mais para a segunda situação, mas ainda é válido saber quem prefere serifada ou sem serifa.

Título: Trebuchet MS. Textos: Verdana. Marcelo Glacial

A boa e velha Arial. Henrique Costa

Trebuchet MS. Frederick Van Amstel

Trebuchet MS e Verdana ou Trebuchet MS e Arial. Depende muito do comportamento que será atribuído ao texto. Tony Conde

Deu leitura, passou a idéia do site, é essa. Particularmente, estou numa fase mais de fontes com serifa… acho que só ver sites com fontes sem serifa, ajudou. Caetano Neto

Para texto, qualquer uma sem serifa que se encaixe no desenho do site, abusando bastante da Verdana e Tahoma. Para imagens, de acordo com o desenho. Thiago Bessa

Minha tipografia favorita é aquela que melhor dialogar com o projeto. Mas, pessoalmente, tenho apreço maior por famílias sem serifas com hastes robustas. Chico Neto

O que for relevante e adequado. Tem cliente com cara de Caslon, de Interstate, de Frutiger, de Bembo. Isso não tem nada a ver com a tipografia escolhida para o logo ou comunicação visual de um cliente, mas com o estado de espírito de seu público. Luli Radfarer

Arial nos textos, pois assim posso deixar o corpo do texto um pouco maior (Verdana grande é horrível). Em situações com uso de imagens vai depender do cliente, mas tenho uma maior afeição pela Frutiger e Helvetica. Rafael Dourado

Gosto muito de usar Verdana, Trebuchet MS e Lucida Grande para projetos que são realmente textos. Quando o texto vai em uma imagem ou os títulos serão imagem, gosto de usar HUMANIST. Normalmente uso letras sem serifa. Combinam mais com o ambiente de web. Entretanto, fica muito interessante o uso de letras com serifa. O site fica mais elegante. Mas deve ser usado com moderação e deve haver um cuidado extra ao combinar com letras sem serifa. Diego Eis

Na web costumava usar Verdana 10px ou 11px para parágrafos, mas com os monitores e resoluções cada vez maiores estou tentando me acostumar a usar Trebuchet MS 12px com line-height 140% para parágrafos e Georgia 28px para títulos, mas em algumas interfaces a Verdana ainda impera. Para impressos Georgia e Times New Roman ainda são imbatíveis e são figurinhas fáceis no meu CSS para impressão. Nos logotipos Helvetica e Tahoma caem bem. Rodrigo Muniz

Tipografia na web não importa muito, pois o usuário pode chavear os estilos. Walmar Andrade

Deixei a resposta do Walmar por último de propósito. Discordo dele, pois a quantidade de pessoas que chaveam os estilos é mínima, e por mais que ele tenha essa escolha não quer dizer que a primeira opção deva ser menos cuidadosa. Se entrar na conversa a composição do layout então nem se fala. Mestre Walmar, explique-se melhor. hehehe

4. Que livro de design considera obrigatório? voltar

Excelentes dicas aqui. Steve Krug esteve em quase todos, só confirmando a alcunha de obrigatório. Engraçado foi a quantidade de livros sobre tipografia. Acho que em pouco tempo algumas das respostas da pergunta anterior mudarão.

Designing Interactions, Bill Moggridge Frederick Van Amstel

Elementos do Estilo Tipográfico de Robert Bringhurst. Diego Eis e eu concordo

O do Hollis, para história; o do Frutiger para iconografia; o do Bringhurst para tipografia… Um monte. O meu eu não recomendo mais: está muito velho. Tampouco recomendo os do Dondis e da Santaella, que não entenderam que design é comunicação e escrevem em chinês. A revista HOW tem livros introdutórios de primeira também. Luli Radfahrer

Atualmente, Pensar com Tipos. Chico Neto

Introdução à Análise da Imagem (Martine Joly): Aprender as ferramentas de design qualquer um aprende até lendo o help. Mas estudar semiótica é um divisor de águas. O livro faz muitas leituras de imagem é muito interessante como primeira leitura sobre semiótica.
Design Visual 50 Anos (Alexandre Wollner): Conheci esse livro por indicação do Chico Neto. Alexandre Wollner é só o primeiro designer brasileiro e ainda em atividade. Sua história de confunde com o desenvolvimento da profissão no país e é uma aula de técnicas de design e postura profissional. Ah! E ele tem um mau humor divertidíssimo. Rafael Dourado

Sou leitor compulsivo de monitor Mas acho que livros como Webwriting: Redação e Informação para a Web do Bruno Rodrigues e Não me faça pensar do Steve Krug são obrigatórios para qualquer profissional de webdesign, mesmo o primeiro não sendo focado em design. Rodrigo Muniz

Não me faça pensar! O livro é sobre Usabilidade mas acredito que hoje as pessoas precisam inverter a forma com que aprendem a fazer “design”. Primeiro é preciso entender que problemas de design se resolvem com o equilibrio entre a estética e a facilidade de uso. Muitos investem muito em estética e nada em “utilização”. Este livro todos deveriam ler! Henrique Costa. Walmar Andrade assina embaixo

Putz… Livro é difícil. Esse do Wollner que o Dourado citou é muito bom. Tô lendo o Design para Internet do Felipe Memória, tô gostando. Caetano Neto

Design para internet – Projetando a experiência perfeita / Felipe Memória. Tony Conde

Os clássicos, Memória, Nielsen, Steven.. (olha a intimidade.. hehe..) mas sempre lendo algo… movimentando sempre a mente… buscando novas referências para não cair na mesmice. Thiago Bessa

Não leio nenhum. O passo 5 explica o porquê. Marcelo Glacial

Tá bom, Glacial. Deixei por último para imendar com a desculpa. hehehe

5. Que site ou revista você lê diariamente? voltar

Vale exportar o OPML do Netvibes? CSS Mania, CSS Remix, CSS Based, CSS Beauty, entre outra galerias. E os blogs específicos: Tableless, Revolução, Fator W, Bittbox, Shauninman e Mezzoblue. Marcelo Glacial

Tenho uns 50 feeds assinados e os leio todo santo dia. Conheço quem tem mais de 500, mas só passa a vista em todos e lê o que interessa. Eu tenho esses 50 e tento ler todos sem exceção quase todo dia. Mas recomendo os sites de todos os que responderam a esta pesquisa. Rafael Dourado

Google Reader vale? Revistas eu só dou uma olhada na Web Design, MTV e na Super Interessante quando vou na livraria rapidinho… É bem difícil um site de artigos e notícias que eu entre diariamente,
acho que só no Digg.com. Mas tenho outras dicas de sites que acompanho os feeds: Fator W do ex-gerente e amigo Walmar está cada dia melhor, A List Apart, A List Apart Brasil, Smashing Magazine, Ivo Gomes, Tá difícil, Tutoriais Photoshop…
Para inspiração eles nunca falham: Web Creme, Open Web Design, CSS Mania e Logopond. Um boa busca no del.icio.us também resolve muita coisa. Rodrigo Muniz

Ai, pega a lista ali na home do meu Blog, deu preguiça Luli Radfahrer

Bartelme Design, The Art of Adam Betts, e tem um monte de outros aqui. Diego Eis

Tenho muitos blogs agregados no meu Bloglines Fredrick Van Amstel

São tantos… Nos meus feeds têm inúmeros sites. Nunca tive a curiosidade de ver ao certo quantos são. Nem tem como ver agora também, não estou no meu pc! Mas acho que tudo começa pelo www.google.com.br rs Tony Conde

Mais de 2 centenas de blogs e alguns livros que sempre estão por perto… Henrique Costa

Nossa, assino uns 200 feeds e leio todos diariamente logo pela manhã. Entre os nacionais, o que acho mais interessante é o de Silvio Meira. Walmar Andrade

Tenho acompanhado mais blogs ultimamente. Embora acredite que não seja o mais visitado aqui, vou colocar o Uailab. Caetano Neto

Além dos blogs mestres, bomabessa , netlus, teoriaglacial e assino a revista web design. Ela é bem interessante, quando não atrasa 1 mês pra chegar é uma leitura boa e atual (a leitura, por que o site…). Thiago Bessa

Além do Netlus…?! Chico Neto

SIM, CHICO! ALÉM DO NETLUS!

Bom. Espero que tenha sido útil de alguma forma. Para mim foi.

Autor: Rafael Dourado
Fonte: http://www.netlus.com.br/5-perguntas-para-12-designers/

Entregando projetos no prazo

Quando foi a última vez que algum cliente solicitou um trabalho seu e você entregou-o tudo certinho na data estipulada? Alguns talvez, consigam estabelecer as metas propostas e com isso ganha muitos pontos com os clientes. Entretanto, as pessoas ainda possuem certa dificuldade em estabelecer prazos e acabam por deixar o contratante aborrecido.  E isso é uma péssima situação para a reputação de qualquer profissional. Mas, quem nunca na vida deixou escapar alguma coisinha e deu aquela atrasada na entrega de um trabalho. Imprevistos sempre acontecem e por isso, na hora de estipular um dia para apresentação de algum projeto, sempre dê uma margem a mais de tempo. Uma ou duas semanas são suficientes para você se organizar e fechar todas as pendências. Esse tempo geralmente representa 10%/15% a mais do total em um projeto de médio porte.

Pensar em seu cliente é importante. Mais importante do que você imagina. Seja lá qual for o tipo de projeto que você irá se envolver. Nunca se pode esquecer que um cliente pequeno poderá te indicar para uma grande empresa ou mesmo para outro cliente de grande potencial. Então, trate-o como qualquer outro.

Como você se sentiu quando alguém quebrou um trato com você? Com que sensação você ficou? No mínimo, um pouco chateado. No mundo de hoje, o preço que se paga quando não se cumpre um determinado acordo é a perda total da confiança que as pessoas têm umas pelas outras. Elas ficam decepcionadas e você é quem se dá mal.

Pratique o hábito de entregar soluções no prazo. Você será muito mais feliz e deixará muito mais clientes satisfeitos. Um cliente feliz vale mais que 20 aborrecidos.

Posts relacinados – Leia mais:

Plugin do IE6 para Desenvolvedores Web by Yalli Oliveira on August 3rd, 2007
Essa semana, ao adquirir o livro .

A Importância dos Wireframes no processo de criação by Yalli Oliveira on July 30th, 2007
Para quem não sabe o que é wireframe: É uma espécie de rascunho ou esqueleto de uma tela que mostra onde vai ficar cada elemento de uma determinada interface(menu, logomarca, agrupamento de notícias, etc) facilitando nossas vidas no decorrer de projetos.

Acessibilidade na web by Yalli Oliveira on August 8th, 2007
Próxima semana estarei dando início a pesquisa e desenvolvimento de um projeto que contará no meu currículo como uma Iniciação Científica.

Fonte: http://www.webnatal.com/

15 erros que você deve evitar em um site

Introdução

Você já acessou um site e teve a sensação de que alguma coisa muito errada tinha sido feita ali? Ruim essa sensação, não é mesmo? Se você quer evitar que os visitantes do seu site tenham essa mesma impressão, fique de olho em alguns detalhes que podem derrubar seu projeto:

1 – Conteúdo importante em janelas pop-up

Hoje em dia mesmo os usuários menos experientes já têm bloqueadores de pop-up ativados nos navegadores. Se o conteúdo for realmente importante, não tente inventar moda: coloque-o numa página normal e garanta que ele será visto por todos os visitantes.

2 – Animações de abertura

Quando o usuário acessa um site, ele procura informação. Para ele, pouco importa se você aprendeu técnicas super legais no seu curso de Flash, ele quer acessar o site sem esperar. Por isso, evite as chamadas splash screens a todo custo. Mas se você não tiver mesmo outra saída – ou quando seu cliente insistir muito e não abrir mão da abertura – não esqueça de colocar um link de “pular animação” (que funcione!).

3 – Música no site

Em alguns tipos de sites, especialmente naqueles voltados para o público mais jovem, a música é uma ferramenta interessante. Porém, se não for bem projetado, esse recurso pode, na verdade, criar uma má impressão no usuário. Imagine se ele estiver escutando música? Ou se a caixa de som estiver ligada com o volume muito alto? Aqui vale novamente a dica: se não tiver outro jeito e a música for necessária, não esqueça de incluir os controles de volume, pause e stop.

4 – Site sem contato

Seu site não deve ser uma ilha isolada do resto da humanidade. Se você tem o que dizer na internet, deve dar às pessoas a chance de contatá-lo para criticar, elogiar ou acrescentar algo às suas idéias. Coloque um formulário e/ou um endereço de e-mail para o usuário entrar em contato. Já publiquei aqui no InfoWester uma coluna falando sobre como disponibilizar seu e-mail de forma eficiente no site.

5 – Desabilitar o teclado

Se você não quer que seu conteúdo corra o risco de ser roubado, não publique-o na internet. Utilizar códigos em JavaScript que bloqueiam o teclado ou o clique do mouse não impede a ação de usuários mal intencionados, e ainda atrapalha a navegação do visitante comum, que nada tem a ver com suas preocupações.

6 – Imagens mal tratadas

Antes de publicar imagens e fotos, trate-as num editor de imagens da maneira apropriada. Se for publicar uma galeria de fotos, por exemplo, gere os arquivos das miniaturas no tamanho apropriado. Não exiba imagens com tamanho diferente do original, ou seja, se a sua imagem tem 100×100 pixels, e você quer exibí-la com 50 pixels de largura, gere um novo arquivo com as dimensões corretas. Imagens “estouradas” (como a do logotipo do InfoWester ao lado) deixam a página feia e são mais demoradas para carregar, pois o navegador precisa processar o novo tamanho. Imagens com alta resolução também deixam a página pesada para carregar, o que pode fazer seu visitante desistir e ir para outro site.

7- Site que não funciona em qualquer navegador

Outro assunto que já tem sido tratado aqui desde a minha primeira coluna. É você que precisa se adequar ao computador do usuário, e não o contrário. Quem utiliza outros navegadores que não o Internet Explorer sabe bem como é frustrante acessar um site e não conseguir visualizar seu conteúdo ou todos os seus recursos porque foram projetados só para um navegador. Poucas pessoas têm a paciência de abrir outro browser para continuar navegando no site, ou pior ainda: muitos nem têm outro navegador instalado.

8 – Não testar seus links

Você já clicou num link que levou a uma página de erro? Já preencheu um formulário e ficou sem saber se ele foi enviado ou não? Chato isso… Não deixe que seu usuário tenha o mesmo problema: teste todas as suas páginas, especialmente depois de publicar o site no servidor. Leia mais no artigo Desenvolvimento do site: backup, testes e feedback.

9 – Erros de português

De novo, mais um item que eu venho citando desde o começo, mas não custa repetir. Se você quer que seu site seja levado a sério, disponibilize seu conteúdo num português correto, sem erros de gramática ou digitação. É claro que um erro ou outro pode escapar, afinal, errar é humano, mas se esforce para evitá-los.

10 – Disponibilizar um conteúdo que dependa de plugins

Hoje em dia a grande maioria dos usuários possui todos os plugins mais comuns instalados em seus computadores. Porém, não deixe que seu conteúdo dependa exclusivamente da exibição desses recursos. O visitante pode estar num computador mais antigo, ou ainda em algum computador onde não possa instalar nenhum plugin, e assim o acesso ao seu conteúdo fica comprometido. Sempre que possível, ofereça uma versão em HTML “normal” da sua página.

11 – Falta de atualização

Não deixe que seu visitante se sinta numa cidade fantasma do velho-oeste. Se você publica notícias no site, mantenha a atualização constante. Se o seu conteúdo é sempre o mesmo e não tem muito o que atualizar, dê sempre uma modificada nos detalhes do layout, adicione fotos novas, enfim, deixei seu site movimentado.

12 – Falta de cuidado com a tag <title>

Se você usa editores visuais, tome cuidado para não publicar uma página com títulos como Sem Título, Documento Sem Título ou untitled.html. É feio, dá a impressão de relaxo e descuido, e ainda prejudica seu site nos mecanismos de busca.

13 – Conteúdo sem referência

Quando publicar conteúdo de outro site, não esqueça de dar os devidos créditos ao autor, linkando a origem da informação, se possível. Notícias sem créditos passam uma péssima impressão, e você ainda pode acabar arrumando problemas com o verdadeiro autor da informação.

14 – Navegação complicada

Vivemos em um mundo agitado, onde as pessoas têm pressa. Elas querem que sua página carregue rapidamente, forneça as informações que elas procuram de forma quase instantânea e, caso precisem navegar, não querem se sentir perdidas com um menu “alternativo”. Às vezes apostar no tradicional é a melhor forma de acertar, por isso projete os menus de seu site de forma óbvia e objetiva.

15 – Esta página está em construção

Se você ainda não desenvolveu seu site completamente, não publique páginas “em construção” ou “breve”. GIFs animados então são o fim da picada! Se o conteúdo ainda não está disponível, simplesmente não coloque o link para ele.

Finalizando

A grande dica aqui é conhecer seu público e adequar seu site a ele. Músicas, vídeos e animações, tudo isso pode fazer toda a diferença, mas quando bem aplicado. Entender o seu público alvo, descobrir o que ele espera do seu site e equilibrar seu conteúdo com a aplicação consciente dos recursos que tem em mãos é uma combinação que pode ser a chave do sucesso de seu projeto.

Fonte: http://www.infowester.com/

Autor(a): Erika Sarti, em 16/04/2007.

Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em www.erikasarti.net.

Simulador de Crawler

Este serviço on-line simula e mostra como os robôs do Google e outros serviços de busca visualizam o conteúdo do seu site. Como você deve saber estes softwares robôs vasculham toda internet catalogando páginas e palavras relacionadas a elas. Verifique se o conteúdo que pode ser lido é realmente relevante. Quanto maior a quantidade de textos relavantes no seu site melhor será sua posição nos resultados de busca.
Visite: http://seobench.com/search-engine-crawler-simulator/

Fonte: http://neosite.ilogic.com.br/dicas

Nó cego eu?

É, nem eu acreditei no que aconteceu hoje, fui barrado em um site, serio mesmo, vo contar como aconteceu.

Estava eu lendo um artigo no http://www.codigolaranja.com.br e quando terminei de ler fui ate o rodapé do site e vi um botão com a seguinte frase “Mantedor: Embria Technologies”, resolvi clicar por curiosidade(semre faço isso ) e logo é aberta uma página que podemos ver abaixo:

Achei muito estranho um empresa de tecnologia selecionar os seus clientes pelo navegador que usam.

Mas vamos criar um exemplo aqui, caso eu fosse uma empresa onde só se usa Software Livre? eu não teria o IE nas minhas máquinas né, conseqüentemente não poderia ser um cliente do site mostrado acima. Não estou afirmando nada, é o site da empresa que esta me dizendo que não posso acessar o pq uso o Firefox(com muito orgulho).

Galera, vamos fazer uma pesquisa rápida aqui, vocês concordam com a atitude da empresa? so precisa responder “Sim” ou “Não” e o pequena justificativa.

[]’s

Ausência

Caros amigos, desculpe a minha falta de tempo para atualizar o blog, prometo que esta semana volto com força total

Para descontrair

Pane No Elevador

Num elevador estavam um argentino, um brasileiro, uma garota atraente e uma freira.

De repente, acaba a luz do prédio, o elevador pára e fica às escuras. Ouve-se o som de um beijo seguido de um tapa. Depois de alguns segundos a luz volta e todos ficam calados.

A freira pensa:

— Um dos dois deve ter beijado a garota e ela revidou com um tapa! Bem feito!

A garota pensa:

— Um dos dois deve ter tentado me beijar, acabou beijando a freira e levou um tapa!

O argentino pensa:

— Esse brasileiro de merda beijou essa mina e ela me deu um tapa pensando que fui eu!

O brasileiro pensa:

— Ah! Ah! Ah! Beijei a palma da mão e lasquei um tapa nesse argentino de merda!

Fonte: http://www.mtvip.com.br/

Cores II (psicologia das cores)

A escolha das cores é fundamental para uma boa harmonia dos elementos de um site. Ela pode enfatizar textos, imagens e caracterizar especialmente os elementos da página.

A cor exerce influência decisiva nos olhos dos seres humanos, afeta a atividade muscular, mental e nervosa. A combinação das cores afeta o psicológico e pode tornar um ponto importante no interesse do público em seu site.

A combinação certa pode causar efeitos como de excitação, urgência, contentamento, calma, vulgaridade, melancolia, segurança etc., e ainda destacar algum elemento em relação a outro.

Na Web a seleção de uma cor é um pouco complicada, pois é impossível garantir que uma determinada cor irá se apresentar no monitor do usuário como ela realmente é, ou seja, como a que o designer colocou.

Isto acontece devido ao fato de cada monitor ter uma especificação diferente, uns podem trabalhar com mais vermelho, ser mais brilhante, ter mais contraste e etc., e ainda cada um pode estar configurado com uma determinada resolução como 640×480 pixels, 800×600 pixels e assim por diante.

A combinação desses fatores é que irá determinar a fidelidade e a reprodução de cores e a qualidade das imagens.

Abaixo você poderá visualizar algumas sensações “psicológicas” conhecidas:

As cores e os efeitos psicológicos

Sensações visuais + significado:

- Branco – pureza
- Preto – negativo
- Cinza – tristeza
- Vermelho – calor, dinamismo
- Rosa – graça, ternura
- Azul – pureza, fé

Sensações Acromáticas

Branco: inocência, paz, divindade, calma, harmonia, para os orientais pode significar morte, batismo, casamento, cisne, lírio, neve, ordem, simplicidade, limpeza, bem, pureza.

Preto: sujeira, sombra, carvão, fumaça, miséria, pessimismo, melancolia, nobreza, seriedade. É expressivo e angustiante ao mesmo tempo. Alegre quando combinado com outras cores.

Cinza: pó, chuva, neblina, tédio, tristeza, velhice, passado, seriedade. Posição intermediária entre luz e sombra.

Sensações Cromáticas

Vermelho: guerra, sol, fogo, atenção, mulher, conquista, coragem, furor, vigor, glória, ira, emoção, paixão, emoção, ação, agressividade, perigo, dinamismo, baixeza, energia, revolta, calor, violência.

Laranja: prazer, êxtase, dureza, euforia, outono, aurora, festa, luminosidade, tentação, senso de humor. Flamejar do fogo.

Amarelo: egoísmo, ciúmes, inveja, prazer, conforto, alerta, esperança, flores grandes, verão, limão, calor da luz solar, iluminação, alerta, euforia.

Verde: umidade, frescor, bosque, mar, verão, adolescência, bem-estar, paz, saúde (medicina), esperança, liberdade, paz repousante. Pode desencadear paixões.

Azul: frio, mar, céu, horizonte, feminilidade, espaço, intelectualidade, paz, serenidade, fidelidade, confiança, harmonia, afeto, amizade, amor, viagem, verdade, advertência.

Roxo: fantasia, mistério, egoísmo, espiritualidade, noite, aurora, sonho, igreja, justiça, misticismo, delicadeza, calma.

Marrom: cordialidade, comportamento nobre, pensar, melancolia, terra, lama, outono, doença, desconforto, pesar, vigor.

Púrpura: violência, furto, miséria, engano, calma, dignidade, estima.

Violeta: calma, dignidade, estima, valor, miséria, roubo, afetividade, miséria, calma, violência, agressão, poder sonífero.

Vermelho-alaranjado: sexualidade, agressão, competição, operacionalidade, desejo, excetabilidade, dominação.

A escolha da cor sofre influência da moda, das tendências e da decisão do designer.

Harmonia e Contraste

Espaços em branco podem ser definidos como áreas que não contenham textos, imagens ou qualquer outro elemento gráfico. Saber balancear o conteúdo e o espaço em branco em um site é a chave para manter a harmonia dos elementos dentro da página e prender a atenção do usuário.

A conseqüência da má utilização desse recurso é não ter um bom equilíbrio, assim os olhos ficam confusos pois não existirá uma progressão visual para o internauta seguir e conseqüentemente ele perderá o interesse pela página.

O que pode ser feito para que isto não aconteça é seguir as recomendações de alguns “gurus” em design:

“Não coloque o máximo de informações dentro de uma página”.

“Os espaços vazios reforçam a unidade de grupos, harmonizam as áreas, aumentam o contraste e facilitam a visualização e leitura”.

Em geral as cores claras e quentes elevam e expandem, por isso, no passado era comum casas com o teto pintado de azul e paredes amarelas, a sensação que passava era de mais espaço. Por exemplo, nunca se deve pintar um teto de preto ou roxo, essas cores passariam a sensação de opressão e clausura.

Visibilidade

Amarelo e Azul são as cores que melhor se lêem a distância

O contraste preto-amarelo se vê desde mais longe

O contraste preto-branco tem um valor neutro

O contraste vermelho-verde é o que menos se percebe

Em geral os elementos gráficos escuros sobre fundo claro se percebem melhor que o contrário

Fonte: http://www.mxstudio.com.br/

Cores e seus significados psicológicos

Por Fabrício Alves,

As cores influenciam psicologicamente os seres humanos de várias maneiras, e são mais ligadas à emoção do que propriamente à forma. Se várias figuras coloridas forem mostradas a um grupo de pessoas, essas pessoas se lembrarão mais facilmente das cores do que das formas dessas figuras.

Quando escolhemos uma cor para elaborarmos nossos trabalhos, sejam trabalhos de design, ilustração, anúncios ou qualquer outro tipo de trabalho visual, devemos ter em mente que estamos lidando com um elemento de estímulo imediato, e que essa cor escolhida provocará diversas reações em seus observadores, reações essas que podem ser positivas ou negativas, dependendo da sua utilização.

Por isso, é extremamente importante estarmos atentos à psicologia das cores e seus significados, para melhor aplicarmos essas cores em nossos trabalhos. É imprescindível que qualquer pessoa que trabalhe com comunicação conheça as terias básicas da cor, para saber como estas se complementam e interagem umas com as outras.

É realmente muito interessante, verificar como a psicologia das cores são utilizadas atualmente, principalmente pelas grandes empresas. Marcas conhecidas mundialmente, fazem uso constante deste conhecimento para chamar a atenção, ou simplesmente, vender mais seus produtos.

Empresas como a Coca-Cola, que utiliza o vermelho na maior parte de seus produtos, remetendo ao calor, mas este calor sendo “quebrado” pelo frescor que representam as bolhas d’àgua desenhadas nas latas. Também o caso do Mc’Donalds, com as cores amarelo e vermelho. O amarelo forte é usado para gerar ansiedade, o vermelho para dar fome e os dois juntos, presente em grande quantidade dentro das lanchonetes desta empresa, estimulam seus clientes a comerem em demasia e rapidamente, pois a presença destas cores geram um certo desconforto se visualizadas por muito tempo.

Abaixo, um resumo com o significado de algumas cores:

- Branco:
Sugere pureza. Cria uma impressão de vazio e de infinito. Evoca frescor e limpeza, principalmente quando combinado com o azul.
Ex: Ordem, simplicidade, luz, paz, higiene, casamento, hospital, neve, harmonia.

- Preto:
Silêncio. Morte. Quando brilhante, confere nobreza, distinção e elegância. Cor preponderantemente masculina.
Ex: Noite, nobreza, pessimismo, tristeza, dor.

- Cinza:
É a expressão de um estado de alma duvidosa e neutra. Símbolo da indecisão e da ausência de energia. Quanto mais sombrio, mais conota desânimo, monotonia.
Ex: Chuva, máquinas, seriedade, velhice, desânimo, sabedoria.

- Vermelho:
Significa força, virilidade, masculinidade, dinamismo. É uma cor exaltante e até enervante. Impõe-se sem discrição. É uma cor essencialmente quente, transbordante de vida e de agitação.
Ex: Cereja, morango, sangue, desejo, sexo, agressividade, fogo, fome, perigo, guerra, força, energia, fúria, dinamismo, paixão.

- Laranja:
Transborda irradiação e expansão. É acolhedor, quente, íntimo.
Ex: Outono, pôr-do-sol, festa, comida, movimento.

- Amarelo:
É uma cor luminosa e muito forte para atrair a atenção, seja sozinho ou em conjunto com outras cores. É feliz, vibrante, vivo.
Ex: Luz, angústia, esperança, atenção.

- Verde:
Cor universal da natureza. Tem frescor, harmonia e equilíbrio. Cor calma, que não se dirige para nenhuma direção nem encerra algum elemento de alegria, tristeza ou paixão. O verde mais amarelado sugere uma força ativa, um aspecto ensolarado. O verde, seja em tons mais claros ou escuros, é sempre indiferente e calmo.
Ex: Floresta, natureza, bem estar, tranqüilidade, juventude, umidade, saúde, tapete de jogos.

- Azul:
Cor profunda, calma. Preferida por adultos, marca uma certa maturidade. Quando sombrio, o azul chama ao infinito. Mais claro, provoca uma sensação de frescura e higiene, principalmente quando na presença de branco.
Ex: Frio, céu, mar, tranqüilidade, paz, infinito, meditação, credibilidade.

- Roxo:
Equivale a um pensamento meditativo e místico, mistério. Assim como o preto, remete a nobreza e poder.
Ex: Sonho, mistério, egoísmo, nobreza, fantasia, profundidade, doença.

- Marrom:
Emana a impressão de algo maciço, denso, compacto. Sugere segurança e solidez.
Ex: Terra, outono, chocolate.

- Rosa:
É de pouca vitalidade e sugere feminilidade e afeição. É uma cor íntima, de doçura melosa e romântica.
Ex: Feminilidade, delicadeza.

Fonte: www.grito.com.br

Ubuntu Propaganda

Fonte: http://www.madman2k.net/comments/69

Menu Editor(Extensão Firefox+Thunderbird)

Uma extensão muito interessante para aqueles que como eu, tem o menu enorme, cheio de opções inúteis.

Install for Firefox

Fonte: http://menueditor.mozdev.org/

50 tutoriais de criação de Logo

Segue abaixo uma lista de tutoriais mostrando como fazer alguns logos, alguns famosos outros desconhecidos, mas vale a pena conferir.

 

Qualquer sugestão de novos tutoriais será bem vinda.

• Creating a logo from start to finish »»



• Strategies for Letter-based Logo Design »»



• Step-by-step logo process »»



• Fly Away – Illustrative Logo»»



• Logos for the Design Challenged by Gary Priester »»



• Vector Safari – Illustrative Logo »»



• Tango – Illustrative Icons »»



• Font Customization Techniques for Sign Logo Creation»»



• Illustrating & Logos (Gazelle logo) »»



• Simple Logos that Have Persona»»



• Basic Shape Illustration»»



• The process of redesigning a logo»»



• Constructing the Perfect Logo»»



• Designing identities for small companies»»



• Using, fusing and abusing “the rules” of logo design»»



• Photoshop Tutorial: How to Make a Web 2.0-Style Logo»»



• Web 2.0 Logo #2 | Designphase»»



• How to Design a Logo of Letters (PDF)»»



• Logo Design With a Star»»



• Citroen Logo»»



• Futuristic Logo – Photoshop tutorial»»



• Creating a nice signal logo»»



• Skype Logo»»



• Vector Style Flame Logo»»



• Cartoon Character Logo»»



• How to Design a Logotype from Conception to Completion»»



• Colorful Logo»»



• Create a complex logo by manipulating lines»»



• Futuristic Logo v13»»



• Simple Icon Logo»»



• Crescent Logo»»



• Jelly Remake»»



• Joel Fagin’s Logo Tutorial»»



• Awards Logo Design»»



• Rev Blues – Illustrative Logo»»



• Simple Logo »»



• Planet Logo»»



• Drawing a Cartoon Dog»»



• Glassy Icon Illustration»»



• Creating a Logo in Illustrator »»



• Tribal Art»»



• Illustrator CS2 Splash»»



• Logo Design in Adobe Illustrator»»



• Creating a Logo With a Cool Globe FX»»



• Big Bocca – Illustrative Logo»»



• How to create whirly logos»»



• Illustrative Lettering»»



• Drawing a Good Logo »»



• Piranha’s Revenge – Illustrative Logo»»



• Basic Building Blocks for Logo Design»»



• Logo Frustration»»

Fonte: http://www.elogodesign.com/

Author: Vukan Karadzic, E Logo Design
Author: Bruno Saric

Aprenda truques para fazer buscas no Google

Praticamente todo usuário de internet, inclusive você, já se deparou com essa situação: ao procurar mais informações sobre um determinado assunto na web, entrou em um site de buscas, escreveu algo naquela tradicional janelinha e… não encontrou o que gostaria. Pois isso acaba hoje: sempre adorei as facetas do Google para busca avançadas e vou compartilhá-las com você agora, dividindo as dicas nas categorias “básica”, “avançada” e “números”.

Opções básicas
O Google não diferencia letras maiúsculas, minúsculas ou acentuação. Para o programa, coração é a mesma coisa que coracao ou CoRaÇÃo.

1) Busca simples
Você pode fazer uma busca com uma ou mais palavras: quando elas são separadas por um espaço, o sistema procura uma E também a outra. Exemplo: Ayrton Senna. Como resultado, o programa vai trazer todo os sites que tenham as palavras Ayrton E Senna, mesmo se elas estiverem separadas no texto.

2) Frase exata
Colocando as duas palavras entre aspas, a busca será efetuada com todas as palavras, na ordem em que foram escritas. Exemplo: “Ayrton Senna”. O resultado irá apresentar todos os sites nos quais a palavra Ayrton é obrigatoriamente seguida pela palavra Senna.

3) Excluindo uma palavra
É possível fazer isso colocando um sinal de menos (-) na frente da palavra que deseja excluir. Exemplo: “Ayrton Senna” -Prost. O resultado vai apresentar sites que tenham “Ayrton Senna”, nesta ordem, e não contenham a palavra Prost.

4) Encontrando sinônimos
Coloque um sinal de til (~) na frente da palavra que deseja procurar; assim, a ferramenta exibirá seus sinônimos. Exemplo: “Ayrton Senna” ~espetacular.

Opções avançadas

1) Busca no título da página
Para buscar o título da página, esse que aparece lá no topo da janela, escreva o termo intitle:, seguido da expressão que quer encontrar. Exemplo: intitle:”Ayrton Senna”. O resultado irá apresentar as páginas que contenham a expressão “Ayrton Senna” no titulo, e não necessariamente no corpo da página. Use allintitle: para buscar por todas as palavras e expressões no título.

2) Procurar em um site específico
Você pode procurar dentro de um site específico, usando o termo “site:” acrescido da URL básica do site. Exemplo: “Ayrton Senna” site:globo.com. O resultado irá apresentar todos os registros da expressão “Ayrton Senna” em todos os sites da globo.com.

3) Todas as palavras no texto da página
Quando você quiser garantir que todas as palavras estão no texto da página (não em links, titulo e etc), use allintext:. Exemplo: allintext: “Ayrton Senna”. O resultado irá apresentar apenas sites em que a expressão “Ayrton Senna” esteja no corpo do texto.

4) Busca por intervalo entre números
Se você está procurando um produto e quer apenas os resultados de busca entre duas faixas de preço, use valor 1..valor 2Exemplo: “Câmera digital” 500..1.000. O resultado conterá sites com a expressão “câmera digital” e números inteiros entre 500 e 1.000.

5) Buscar excluindo conteúdo adulto
Seu filho precisa fazer um trabalho de escola e vai procurar termos como “sexo” e “camisinha”? O risco de ele encontrar um site com conteúdo adulto nesse caso é muito grande. Para diminuir o risco dele ver algo que não deveria, clique aqui e configure essa opção em seu navegador.

6) Busca por tipos específicos de arquivos
Pode ser que alguma vez seja necessário encontrar um arquivo com uma extensão específica, como um arquivo PDF de um manual que você perdeu. Para isso, Use o termo filetype: ou ext: acrescido da extensão que você quer. Exemplo: “manual Celta” ext:PDF. O resultado irá apresentar apenas documentos PDF com o a expressão “manual Celta” em seu conteúdo.

NÚMEROS
Também é possível brincar com as buscas do Google fazendo cálculos matemáticos, conversão de moedas, etc, etc e etc. Vamos lá!

1) Operações matemáticas
Soma: número + número
Subtração: número – número
Multiplicação: número * número
Divisão: número / número
Clique aqui para ver a lista completa de operações.

2) Operações de conversão de moeda
Você precisa saber quanto vale US$ 100 em euros? Simples: escreva o valor, a moeda de origem, a palavra in e a moeda final. Exemplo: 100 USD in euros. Uma observação importante:se o google aparece em português para você, use no lugar de IN a opção EM: 200 USD em euros.

Ufa! Não pense que chegamos ao fim. Ainda existe uma vasta gama de opções de busca para o Google, mas agora jogo a bola para você, leitor. Quer descobrir outras facetas? Use aquelas explicadas neste post para encontrar novas funcionalidades e escreva suas descobertas nos comentários, para dividi-las com outras pessoas.

Para terminar, você pode combinar as opções que apresentei para refinar ainda mais suas buscas. A intenção do Google com isso é qualificar o resultado das buscas: não adianta encontrar 100 mil páginas que não lhe servem. Encontrar dez, sendo que destas metade lhe serve muito bem é o que importa, certo?

Autor: Fernando Panissi
Fonte: http://tiraduvidas.globolog.com.br/

Identificando um layout amador By Bruno Ávila

Segue abaixo um otimo artigo escrito por Bruno Ávila

O que faz a gente bater o olho num site e perceber: esse design está amador? Quando essa dúvida vem, muitas vezes não sabemos explicar o porquê. Foi pensando em responder essa intrigante pergunta que resolvi escrever esse artigo.

Um layout, para ser considerado amador, deve possuir algumas características em comum. As possibilidades são inúmeras mas existem alguns erros que aparecem freqüentemente nesses layouts. São esses erros que apresento agora. Atenção, você, webdesigner, jamais faça o que irei relatar a partir de agora.

JAMAIS ESTIQUE FONTES, IMAGENS E LOGOTIPOS

Erro bem comum entre os iniciantes, essa é uma das características mais vísiveis de um layout amador. Mesmo aos olhos do leigo é perceptível que algo está errado ali. O cérebro interpreta a desproporção das letras, das formas e círculos, dando a impressão clara de que algo foi esticado ou achatado. Jamais cometa esse crime. Ao manusear fontes, imagens ou logotipos, aumente ou diminua suas dimensões de forma proporcional.

EVITE UTILIZAR GAMBIARRAS

Quantas vezes você já tentou corrigir o mal contato no seu fone de ouvido, utilizando um outro fio e uma fita isolante? Isso é o que chamamos de gambiarra. Seria uma maneira errada de se corrigir alguma coisa, evitando ter que fazer tudo de novo. É o que vemos no exemplo acima. O webdesigner em questão pegou um texto vermelho escuro e tacou num fundo azul escuro. Resultado: ninguém conseguiu ler. Então, para que não fosse preciso ter que refazer todo o layout para que o texto vermelho ficasse legível, o nobre webdesigner resolveu colocar um efeito de “glow”, como se uma luz resplandescente iluminasse o fundo da palavra “gambiarra 1″. Aí está um exmeplo de gambiarra muito comum. Utilizou-se um efeito totalmente artificial, mal empregado, deixando a palavra pesada, poluída.

Não satisfeito, o webdesigner abandona a idéia do glow e taca um contorno amarelo na palavra “gambiarra 2″. Agora sim, a palavra ficou mais pesada ainda, como uma grossa barra de ferro.

Evite esse tipo de efeito, ao ver que a fonte não está legível ou sendo ofuscado, troque a cor do fundo ou da fonte até encontrar o melhor contraste. E se for necessário, volte a estaca zero e monte o layout novamente. Ao utilizar efeitos, utilize com muito critério e de uma forma que não fique artificial.

EVITE FONTES COMPLICADAS

Você entendeu o que está escrito aí em cima? Nem eu. Evite fontes de difícil leitura. Utilize o bom-senso.

CADA FONTE, UM SENTIMENTO

A fonte utilizada acima é a Comic Sans. Nota-se seu estilo de “revista em quadrinhos”. O que tem a ver esse tipo de fonte com uma funerária? Por isso utilize sempre um tipo de fonte que transmita o sentimento mais adequado. No caso da funerária, uma simples Times New Roman cairia bem.

TÍTULOS DESLOCADOS PARA A DIREITA

Nossa leitura se faz da esquerda para direita, como qualquer ocidental. Por isso encontramos em quase 100% dos sites ocidentais esse tipo de alinhamento. Deixar deslocado o título um pouco para a direita denota falta de alinhamento com o texto que vem embaixo. Nesse caso, alinhe o título com o texto. Se for um menu, pode colocar o texto que vem abaixo do título principal deslocado para a direita, dando uma idéia de hierarquia.

MENU DESALINHADO

Erro muito comum entre os iniciantes. Transmite falta de cuidado e quebra de leitura. Coloque todos alinhados na mesma linha. Recomendo a utilização de uma linha guia, caso tenha dificuldades em alinhar.

TEXTOS SEM MARGEM

Sempre devemos dar margens no topo, rodapé, esquerda e direita do texto. Além de dar uma sensação de leveza, também serve como uma moldura invisível, destacando o texto como um elemento visual.

EVITE BEVEL

Assim como o glow, o efeito bevel tende a ser artificial. Ao utilizar este tipo de efeito, use com bastante critério, para que não dê esse tom de artificialidade. Exagerar nesse efeito pode poluir a página e deixá-lo mais pesado visualmente.

EVITE SOMBRAS

As sombras também devem ser utilizadas com critério e de forma muito delicada. No exemplo, vemos um exagero do uso da sombra, dando um aspecto de queimado, sujo, poluindo a página e dificultando a leitura.

E então, gostaram? Acredito que esses sejam as principais características de um layout amador. Se você anda cometendo um desses crimes por aí, não tem problema, tenho certeza que depois de ler esse artigo você irá se redimir.

Para o alto e avante!

Fonte: http://www.brunoavila.com.br/blog/design-web/70
Autor: Bruno Ávila é webdesigner e cantor de banheiro.

Atalhos do Firefox

Navegando pela ampla rede achei um site onde mostra atalhos do Firefox, confesso que vários deles nunca tinha visto, vale a pena conferir

Segue a lista

Browser Management Shortcuts	Windows	Mac OS X	Linux
Help	F1	n/a	F1
Add Bookmark	Ctrl+D	Cmd+D	Ctrl+D
Bookmarks Sidebar (toggle)	Ctrl+B Ctrl+I	Cmd+B	Ctrl+B
Browsing History (toggle)	Ctrl+H	Cmd+Shift+H	Ctrl+H
Download History	Ctrl+J	Cmd+J	Ctrl+Y
Clear Private Data	Ctrl+Shift+Del	n/a	Ctrl+Shift+Del
Page Manipulation Shortcuts	Windows	Mac OS X	Linux
Full Screen (toggle)	F11	n/a	F11
Increase Text Size	Ctrl++ Ctrl+Scroll down	Cmd++	Ctrl++ Ctrl+Scroll down
Decrease Text Size	Ctrl+- Ctrl+Scroll up	Cmd+-	Ctrl+- Ctrl+Scroll up
Restore Text Size	Ctrl+0	Cmd+0	Ctrl+0
Print	Ctrl+P	Cmd+P	Ctrl+P
Reload Page	F5 Ctrl+R	F5 Cmd+R	F5 Ctrl+R
Force Reload Page (override cache)	Ctrl+F5 Ctrl+Shift+R Shift+Reload button	Cmd+Shift+R Shift+Reload button	Ctrl+F5 Ctrl+Shift+R Shift+Reload button
Stop Loading	Esc	Esc Cmd+.	Esc
Save Page As	Ctrl+S Alt+Left-click	Cmd+S	Ctrl+S
Page Source	Ctrl+U	Cmd+U	Ctrl+U
Page Info	n/a	Cmd+I	Ctrl+I
DOM Inspector	Ctrl+Shift+I	Cmd+Shift+I	Ctrl+Shift+I
Page Navigation Shortcuts	Windows	Mac OS X	Linux
Go Down One Line	Down Alt+Scroll down	Down	Down Alt+Scroll down
Go Up One Line	Up Alt+Scroll up	Up	Up Alt+Scroll up
Go Down One Page	PageDown Spacebar	PageDown Spacebar	PageDown Spacebar
Go Up One Page	PageUp Shift+Spacebar	PageUp Shift+Spacebar	PageUp Shift+Spacebar
Go to Bottom of Page	End	End	End
Go to Top of Page	Home	Home	Home
Move to Next Frame	F6	F6	F6
Move to Previous Frame	Shift+F6	Shift+F6	Shift+F6
Move Focus to Next Actionable Item	Tab	Tab	Tab
Move Focus to Previous Actionable Item	Shift+Tab	Shift+Tab	Shift+Tab
Open Link	Enter	Return	Enter
Open Link in New Tab	Ctrl+Enter	Cmd+Return	Ctrl+Enter
Open in Background Tab	Ctrl+Left-click Middle-click	Cmd+Click	Ctrl+Left-click Middle-click
Open in Foreground Tab	Ctrl+Shift+Left-click Shift+Middle-click	Cmd+Shift+Click	Ctrl+Shift+Left-click Shift+Middle-click
Paste URL in Tab	n/a	n/a	Middle-click on Tab 1
Open Link in New Window	Shift+Enter Shift+Left-click	Shift+Return Shift+Click	Shift+Enter Shift+Left-click
Save Link Target As	Alt+Enter	Option+Return	Alt+Enter
Caret Browsing	F7	F7	F7
Navigational Shortcuts	Windows	Mac OS X	Linux
Home Page	Alt+Home	Option+Home	Alt+Home
Back	Backspace Alt+<- Ctrl+[ Shift+Scroll down	Delete Cmd+[	Backspace Alt+<- Ctrl+[ Shift+Scroll down
Forward	Shift+Backspace Alt+-> Ctrl+] Shift+Scroll up	Cmd+-> Cmd+]	Shift+Backspace Alt+-> Ctrl+] Shift+Scroll up
Open New Tab	Ctrl+T Double-Click on Tab Bar	Cmd+T Double-Click on Tab Bar	Ctrl+T Double-Click on Tab Bar
Close Tab (close Window if only one tab)	Ctrl+W Ctrl+F4 Middle-click on Tab	Cmd+W Cmd+F4	Ctrl+W Ctrl+F4
Next Tab	Ctrl+Tab Ctrl+PageDown	Ctrl+Tab Ctrl+PageDown	Ctrl+Tab Ctrl+PageDown
Previous Tab	Ctrl+Shift+Tab Ctrl+PageUp	Ctrl+Shift+Tab Ctrl+PageUp	Ctrl+Shift+Tab Ctrl+PageUp
Select Tab [1 to 9]	Ctrl+[1 to 9]	Cmd+[1 to 9]	Alt+[1 to 9]
Open New Window	Ctrl+N	Cmd+N	Ctrl+N
Close Window	Ctrl+Shift+W Alt+F4	Cmd+Shift+W Option+F4	Ctrl+Shift+W Alt+F4
Location Shortcuts	Windows	Mac OS X	Linux
Select Location Bar	Ctrl+L Alt+D	Cmd+L	Ctrl+L Alt+D
Complete .com Address 2	Ctrl+Enter	Cmd+Return	Ctrl+Enter
Complete .net Address 2	Shift+Enter	Shift+Return	Shift+Enter
Complete .org Address 2	Ctrl+Shift+Enter	Cmd+Shift+Return	Ctrl+Shift+Enter
Open Address in New Tab 2	Alt+Enter	Option+Return	Alt+Enter
Open File	Ctrl+O	Cmd+O	Ctrl+O
Web Search Shortcuts	Windows	Mac OS X	Linux
Web Search (Keyword)	Ctrl+K	Cmd+K	Ctrl+K Ctrl+J
Select Next Search Engine in Search Bar	Ctrl+Down	Cmd+Down	Ctrl+Down
Select Previous Search Engine in Search Bar	Ctrl+Up	Cmd+Up	Ctrl+Up
Form Shortcuts	Windows	Mac OS X	Linux
Select Next Entry	Down	Down	Down
Select Previous Entry	Up	Up	Up
Toggle Checkbox	Spacebar	Spacebar	Spacebar
Auto Complete Shortcuts	Windows	Mac OS X	Linux
Select Next Auto-Complete Entry	Down	Down	Down
Select Previous Auto-Complete Entry	Up	Up	Up
Delete Individual Auto-Complete Entry	Shift+Del	Shift+Del	Shift+Del
Text Manipulation Shortcuts	Windows	Mac OS X	Linux
Select All	Ctrl+A	Cmd+A	Ctrl+A Alt+A
Cut	Ctrl+X	Cmd+X	Ctrl+X
Copy	Ctrl+C	Cmd+C	Ctrl+C
Paste	Ctrl+V	Cmd+V	Ctrl+V
Delete	Del	Del	Del
Undo	Ctrl+Z	Cmd+Z	Ctrl+Z
Redo	Ctrl+Shift+Z Ctrl+Y	Cmd+Shift+Z	Ctrl+Shift+Z Ctrl+Y
Page Search Shortcuts	Windows	Mac OS X	Linux
Find in This Page	Ctrl+F	Cmd+F	Ctrl+F
Find Again	Ctrl+G F3	Cmd+G F3	Ctrl+G F3
Find Previous	Ctrl+Shift+G Shift+F3	Cmd+Shift+G Shift+F3	Ctrl+Shift+G Shift+F3
Quick Find Text	/	/	/
Quick Find Link	‘	‘	‘

Fonte: http://www.7is7.com/

Menus com listas, construindo de forma simples e semântica

Falar em código semântico, tableless, css e como tudo isso se envolve com a W3C pode ser para alguns um grande quebra-cabeça. Na verdade é, mas com um pouco de vontade, teoria e paciência, esses itens podem se transformar numa verdadeira filosofia de trabalho e depois de um aprendizado bem realizado, tornar a produtividade do dia-a-dia um verdadeiro desafio estimulante.

Resumidamente, compreender a utilização correta dos elementos é um passo extremamente saudável para relembrarmos como tudo foi concebido originalmente para ser utilizado e tornar o trabalho simples e mais claro para todos.

O assunto pode ser um verdadeiro martírio para desenvolvedores, que por muitas vezes se auto absolvem da adequação aos padrões web, construindo aplicações e sites que poderiam ser mais leves, mais responsivos, fáceis de usar, e por conseqüência, mais fáceis de atualizar.

Um exemplo muito utilizado atualmente para mostrar como é possível construir mais simples são os menus para sites, sejam horizontais ou verticais, existe uma maneira muito limpa, verdadeiramente semântica e intuitiva para mecanismos de buscas como o Google.

Uma recomendação que faço para a construção de sites e aplicações é começar pela informação e não layout, pois iniciando seu projeto pela estrutura da informação, a possibilidade do projeto perder o foco é muito menor,além disso, como sabemos, hoje o conceito tableless permite a aplicação de layouts como uma camada sobre o seu código.

Falarei aqui sobre a criação de menus utilizando listas, e listas obviamente tem uma série de utilidades que devem ser tratadas de forma específica caso a caso, o que significa que se usada corretamente, torna seu código naturalmente semântico.

Compreendendo Listas

Para compreender listas é importante saber que existem várias opções de utilização para elas, como vemos abaixo:

1.Listas ordenadas

 

<ol>

 <li>Ricardo</li>

 <li>Felipe</li>

 <li>Manoela</li>

</ol>

O resultado para a lista acima é:

1. Ricardo

2. Felipe3. Manoela

Note que pelo fato de termos utilizado as tags corretas, os itens foram automaticamente ordenados e numerados (esse comportamento é padrão, podendo ser personalizado por CSS).

2. Listas não ordenadas

 

<ul>

 <li>Ricardo</li>

 <li>Felipe</li>

 <li>Manoela</li>

</ul>

O resultado agora é:

o Ricardo

o Felipeo Manoela

Note que esse modelo não numera automaticamente os itens, mas por padrão os marca como itens de uma lista (também é comportamento padrão que pode ser alterado por css).

3. Listas de descrição

 

<dl>

 <dt>Livro</dt>

 <dd>Descrição do livro</dd>

</dl>

O resultado:

Livro

Descrição do livro

Utilizando listas para construir menus

Até aqui você já tomou conhecimento de como as listas funcionam dentro do código html, então não vai ter problemas para entender o código abaixo, pois na verdade o segredo estará no css que aplicaremos a lista.

O modelo vertical de menu:

 

<ul class="menu_vertical">

 <li><a href="#">Home</a></li>

 <li><a href="#">História</a></li>

 <li><a href="#">Filosofia</a></li>

 <li><a href="#">Produtos</a></li>

 <li><a href="#">Contato</a></li>

</ul>

Note que definimos em ul utilizará a classe menu_vertical, vamos ao código CSS que faz tudo acontecer como desejamos:

 

<style type="text/css">

ul.menu_vertical {

 margin: 0;

 padding: 0;

 list-style: none;

}

ul.menu_vertical li a{

 display: block;

 padding: 10px;

 color: #333;

 background: #eee;

 border-bottom: 1px solid #fff;

 text-decoration: none;

}

ul.menu_vertical li a:hover {

 background: #ccc;

}

</style>

Note que o código CSS é bem simples, mas tem parâmetros chaves importantíssimos que são em “ul” a redução de margin e padding para 0 (zero), pois essa tag tem por padrão valores positivos setados nela; o display: block na tag “a” permite que a área de clique seja maximizada para toda a área disponível dentro da tag li a qual ela está contida.

O resultado visual deste menu é o seguinte:

É importante lembrar que o menu terá automaticamente a largura máxima do seu objeto pai, porém é possível limitar sua largura a um valor específico setando o parâmetro width no CSS da tag ul.

O modelo horizontal de menu:

Este modelo utiliza praticamente o mesmo código, com pequenas modificações, veja:

 

<ul class="menu_horizontal">

 <li><a href="#">Home</a></li>

 <li><a href="#">História</a></li>

 <li><a href="#">Filosofia</a></li>

 <li><a href="#">Produtos</a></li>

 <li><a href="#">Contato</a></li>

</ul>

Só mudei o nome da classe, note que o html continua exatamente o mesmo. Vamos ao CSS:

 

ul.menu_horizontal {

 margin: 0;

 padding: 0;

 list-style: none;

}

ul.menu_horizontal li {display: inline;}

ul.menu_horizontal li a{

 float: left;

 display: block;

 padding: 10px;

 color: #333;

 background: #eee;

 text-decoration: none;

}

ul.menu_horizontal li a:hover {

 background: #ccc;

}

O resultado final:

Observe que é ai que entra o conceito moderno de personalização de layouts através de tableless, pois o html não foi alterado, apenas sua classe, e o código CSS foi o responsável pela mudança da aparência, deixando claro um conceito de camadas, cada uma com sua respectiva função.

As alterações no CSS que permitiram ao mesmo menu ter a aparência horizontal foi que na tag “li” aplicamos display: inline, pois assim ele deixa de ser nativamente um elemento de bloco e passa a ser um elemento de linha, não criando mais quebras de linha antes e depois dele mesmo (padrão a todo elemento de bloco), em seguida determinamos para “a” float: left, o que significa que as tags “a” estarão posicionados lado a lado, a partir da esquerda para a direita.

Os trechos CSS apresentados acima podem ser personalizados eternamente a gosto e necessidade da sua aplicação. Não se esqueça que o CSS dá a você o controle sobre a aparência da sua página ou aplicação.

O importante no conceito tableless é escrever simples, sem complicação, sem redundância e sempre, mas sempre que possível procure rever seu código a busca de limpeza e redução de conteúdo desnecessário.

Para saber mais as incríveis variações de CSS que se pode fazer com listas, você não pode deixar de visitar este site: Listamatic (http://css.maxdesign.com.au/listamatic/).

Seja simples, faça um trabalho limpo e torne-se mais produtivo, antes que seus concorrentes o façam.

Até a próxima!

 

Autor: Roberto Rabadan (e-mail) é Analista de Usabilidade da LocaWeb focado no design de interfaces web. Tem como principal objetivo profissional aprimorar as competências entre design e usabilidade de interfaces, buscando tornar a experiência e prazer de navegação a mais perfeita possível para o usuário final. Graduado em Propaganda e Design, tem mais de 16 anos de experiência com soluções para internet.

Fonte: http://www.imasters.com.br/

Picnik: Nunca foi tão fácil editar suas fotos online

Há algum tempo atrás, falei de um editor de fotos online, o Phixr.com. Na ocasião, tinha gostado do serviço em questão, porém foi aquele gostar meio sem opção, o gostar por não ter surgido nada melhor. Eis que recentemente descobri um que alia tudo aquilo que gosto.

Um bom serviço pra mim, seja ele online ou offline, é aquele que consegue agregar um bom visual, uma grande funcionalidade e uma grande acessibilidade, tornando o uso simple, eficiente e prazeroso. O picnik consegue reunir tudo isso!

Você gosta de uma interface usando muito flash e ajax? Se gostar e tiver a necessidade esporádica de utilizar um editor de fotos quando está fora de casa, creio que você acaba de encontrar uma solução.

Escolhendo/Enviando a foto

Logo de cara, você poderá escolher se deseja trabalhar em uma foto do seu computador, ou de um website (sendo especialmente fácil caso estas sejam do Flickr ou Yahoo! Photos), webcam, ou testar o produto com uma das fotos disponíveis. Ao terminar de enviar a sua foto, ele te transfere para a aba de edição, onde a “diversão” começará.

Editando a sua foto

Caso você queira aproxima a visão, é bem simples, basta utilizar o interessante zoom. Depois de se ajustar, conheça as opções de edição disponíveis no serviço:

• Auto-fix: Correção automática de alguns atributos
• Rotate: Girar
• Crop: Recortar determinado local
• Resize: Redimensionar
• Exposure: Controlar a iluminação
• Colours: Controlar a coloração
• Sharpen: Controlar a nitidez
• Red-Eye: Remover os já não tão comuns, olhos vermelhos

Ao clicar em qualquer uma destas opções, o super-organizado menu automaticamente irá dar lugar ao local onde você poderá especificar os detalhes da função. Complicado? Uma imagem te explicará tudo. Veja na imagem abaixo o que acontece quando eu clico na opção rotate, compare com a imagem lá de cima.

Entendeu?

A partir daí, tudo é muito auto-explicativo, feito para o agrado do usuário leigo até o avançado que está longe de seu Photoshop. Uma outra ferramenta muito interessante, é o Cropping, feito de maneira rápida e muito interessante. Ao clicar nesta função, ele cria uma grade na imagem, para que você possa rapidamente selecionar aonde quer cortar.

Efeitos Criativos

Além da aba de edição, você pode adicionar os “Efeitos Criativos”, apesar que esse quesito ainda não está totalmente desenvolvido, ficando restrito a alguns “Efeitos Especiais”:
Black & White: Transformar a foto para Preto & Branco

Sepia: Converter a foto para tons Sepia (vide figura ao lado)

Boost: Aumentar a intensidade das cores

Matte: Destacar a foto com um efeito claro ao redor do objeto central

Vignette: Destacar a foto com um efeito escuro ao redor do objeto central

Soften: “Borrar” a foto

Salvando a sua foto

Se você tiver terminado de editar a sua foto, vá para a aba Save & Share, lá poderá enviar por email, salvar no computador, criar um slideshow no flickr, salvar no flickr, ou até mesmo mandar imprimir (não disponível na versão beta).

Conclusão

Levando em conta a sua situação (longe de casa, sem estar no seu pc com seu programa de edição predileto), o picnik com certeza será extremamente útil e conseguirá cumprir com louvor a sua proposta. Confesso que um ponto crucial que me agradou foi o visual (foi o que fez eu testar o produto), mas logo descobri que além disso, ele realmente é bem eficiente. Melhor do que ler como ele funciona, é ir lá e testar! Cliquem aqui.

Fonte: http://www.diogoazevedo.com/

Autor: Diogo Azevedo

Que fonte será esta?

Volta e meia me deparo com um logo onde preciso recria-lo mas não tenho nem idéia da fonte que foi utilizada, bom eis aqui a solução(ou pelo menos uma ajuda), o site www.myfonts.com oferece uma ferramenta que pode te ajudar nesta tarefa, você coloca a imagem e ele te sugere algumas contes parecidas com a da sua imagem.

Segue um exemplo da utilização
1 – Localizando imagem a qual deseja encontrar o nome da fonte.

2 – O sistema “scaneia” a imagem e te pergunta quais letras deseja procurar.

3 – Por fim, te mostra as fontes mas parecidas que ele encontrou.

Saridon

Ebay

Fonte: http://adhunt.blogspot.com/

Knorr

Fonte: http://adhunt.blogspot.com/

iPod Hi-Fi

Fonte : AdRants.

Milenio

Um mundo tão complexo que as vezes precisa de uma boa explicação.



Fonte: http://adhunt.blogspot.com/

Pilot Extrafine Pen

Caneta Pilot Extrafina
GREY & TRACE Barcelona.

Fonte: http://adhunt.blogspot.com/

HP

Simples campanha de guerrilha da HP’s Photosmart 955C Printer
Publicis Graffiti Argentina.

Fonte: http://adhunt.blogspot.com/2007/02/hp-photosmart-printer.html

Artigos de papelaria da Penline

Penline Stationery: Strong tape. Agency: Euro RSCG, Kuala Lumpur, Malaysia, Creative Director: Case Deenadayalan, Art Director: Choo Chee Wee, Copywriter: Joel Lim.

Fonte: http://adhunt.blogspot.com/

Permanente

Agência: TBWA, Chile.

Fonte: http://thiagomiranda.wordpress.com

É Guerra!

Isso é o que eu chamo de bater de frente.
Agência: Jung Von Matt de Hamburgo

Fonte: http://thiagomiranda.wordpress.com/

Como desenhar no estilo Web 2.0 – 1ª parte

Existe um estilo predominante hoje na internet e eu vou destrinchá-lo para os designers brasileiros começarem a se acostumar com esse novo jeito de desenhar sites.

1. Simplicidade

Web-design está mais simples que nunca, e isso é uma coisa boa.
Design 2.0 significa foco, clareza e simplicidade.

E isso não significa ser minimalista, como eu vou explicar depois.

Eu realmente acredito na simplicidade. Isso não é dizer que todos os sites devem ser mínimos, mas que deve-se usar quantos recursos forem necessários para alcançar o que você precisa alcançar.

Como diz o ditado : Me dê duas soluções para um problema, a mais simples é a melhor.

O resultado é que você tem que olhar o conteúdo. Você acaba interagindo exatamente com os elementos que o designer planejou. E você não se importa – Isso é fácil, e você tem exatamente o que você precisava.

Por que simplicidade é bom.

• Sites têm metas e toda página tem um propósito.
• A atenção do usuário é um recurso esgotável.
• É o trabalho do designer ajudar os usuários a achar o que eles querem (ou avisar o que o sitem quer aviar paraeles).
• Coisas na tela atrem os olhos. Quanto mais coisas na tela existir, quanto mais coisas diferentesexistirem para noticiar, é menos acessível para o usuário alcançar as coisas importantes.
• Nós temos que estabelecer uma comunicação, e quanto menos barulho, melhor. Isso é economia, ou simplicidade.

Quando e como fazer o designer simples ?

Quando?

Sempre !

Como?

Existem duas coisas importantes para alcançar sucesso com simplicidade:

1. Remova componentes desnecessários, sem sacrificar a efetividade.
2. Tente soluções alternativas para alcançar o mesmo resultado mais simplesmente.

Sempre que você estiver fazendo layouts, remover elementos visuais desnecessários deve ser encarado como uma disciplina.

Concentre-se particularmente nas áreas do layout que são menos relevantes para o propósito da página, por que a atividade visual nessas áreas irão tirar a atenção do conteúdo e da navegação.

Use detalhes visuais – Linhazinhas, palavras, formas, cores – para comunicar uma informação importante, não para decorar

E lembre-se de perguntar-se sempre :

Tem como eu fazer isso de forma mais simples ?.

Se a resposta for sim, simplesmente, FAÇA !

2. Layouts Centralizados

Basicamente, uma grande maioria dos sites atuais são posicionados cetralizados na janela do navegador. Relativamente poucos são full-screen (layout flúido) ou alinhado pela esquerda / tamanho fixo, comparando com alguns anos atrás.

Por que Layout centralizado é bom.

Esse estilo “2.0″ é simples, impactante e honesto. Sites que aparecem centralizados na sua frente ficam mais simples e honestos.

Também, porque nós estamos sendo mais econômicos com nossos pixels (e conteúdos), nós não estamos mais pressionados a apertar o máximo de informações possíveis acima da linha do mar.

Nós estamos usando menos para falar mais, então nós podemos ser um pouco mais livres com os espaços usados, e diagramar nosso conteúdo com muitos dos amáveis espaços em branco.

Quando e como usar o layout centralizado?

Como eu disse, posicione seu site centralizado ao menos que tenha uma ótima razão para não fazê-lo.

Você talvez esteja querendo ser mais criativo como o espaço, ou querendo aglomerar o máximo de informação possível na tela.

3. Poucas Colunas

A alguns anos atrás, sites com 3 colunas era o normal e sites com 4 colunas não eram incomuns.
Hoje, site com 2 colunas são bem comuns, e 3 colunas já está como máximo.

Por que poucas colunas é bom.

Menos é mais. Poucas colunas parecem mais simples, impactantes e mais honesto. Nós estamos mostrando menos informaçãos mais claramente.

o site da apple é um lider na elegância da simplicidade.

Esse tipo de layout funciona muito, mas muito bem. Cada vez que eu experimento o design simples da Apple, eu fico mais convencido que o design Zen é o Graal sagrado.

Como escolher o número de colunas.

Eu definitivamente recomendo que não use mais que 3 colunas, simplesmente por que você não deve usar mais do que precisa.

4. Topo diferenciado

Isso significa fazer o topo da tela (a marca principal e a área de navegação) diferentes do resto (o conteúdo principal)

Claro, isso não tem nada de novo, mas é uma boa idéia e tem sido usada sempre. Mas tem sido usada mais que sempre agora, e a divisão está cada vez mais forte.

Por que o topo diferenciado é bom.

O topo do site diz “Aqui é o topo do site”. Parece óbvio, mas é bom saber onde a página começa.

Isso também inicia a experiência do site com uma força. Isso é muito “2.0″. Nós gostamos de força, impacto.

Quando e como usar o topo diferenciado?

Em qualquer site, a marca e a navegação devem ser óbvias, impactantes e claras.

Então, é uma boa idéia criar um espaço no topo do site para posicionar a logo e a navegação.

Sempre coloque o logo em cima no topo. Eu sempre recomento também, colocar a navegação logo após o logo.

O topo deve ser visualmente diferente do resto do conteúdo. O jeito mais forte de fazer isso é usar um impactante e sólido bloco de uma cor diferente, mas existem alternativas.

5. Navegação simplificada.

Navegação permanente – a navegação global do seu site tem que aparecer em todas as páginas como um parte permanente do layout – tem que ser claramente identificado como navegação, e tem que ser fácil de interpretar.

• Design 2.0 faz a Navegação global grande, impactante, limpa e óbvia.
• Hyperlinks inline (links dentro de textos) são claramente diferenciados do texto normal

Por que navegação simplificada é bom.

O usuário precisa ser capaz de identificar a navegação, que vai dizer-lhe várias informações

• Onde ele está (em um esquema de coisas)
• Onde mais ele pode ir a partir daqui
• E quais opções ele tem para fazer as coisas

Seguindo o princípio da simplicidade, e a diminuição geral do “barulho”, o melhor jeito de deixar claro a navegação é :

• Posicionar os links permanentemente longe do conteúdo
• Diferenciando a navegação usando cores, tons e formas
• Fazer a navegação grande e impactante
• Deixar claro o texto de cada link, sem ambiguidades

Como manter uma navegação simplificada?

Lembre-se sempre de uma coisa: Navegação tem que estar claramente diferenciada da não-navegação.

6. Logos impactantes.

Uma marca limpa, forte e impactante – incorporando atitude, tom de voz e primeira impressão – é ajudada por um logo impactante.

Por que?

Fortes, logos impactantes dizem “Aqui estamos nós” de um modo que nós podemos acreditar.

Quando e como ?

É muito difícil de dizer como criar um bom logo, mas em resumo…

Seu logo deve :

• Funcionar em todos os contextos – incluindo panfletos e camisas
• Ser reconhecível e diferente
• Representar a personalidade e as qualidades da sua marca na primeira vez que ela é vista

Na segunda parte vou falar sobre tamanhos de textos, introdução dos sites, cores, superfícies, entre outras coisas.

 

Autor: Julio

Fonte: http://julioweb.wordpress.com/

Bem Bolado

Fonte: http://www.uhull.com.br/

Menu horizontal em lista com Imagens

Mostrei como fazer um bonito menu horizontal em lista usando imagens.
Dimensões:

Precisaremos da imagem abaixo:

HTML

<div id=”navigation”>
<ul id=”nav”>
<li id=”home”><a class=”current” href=”#”>Inicio</a></li>
<li id=”tutorials”><a href=”#tutorials” >Tutoriales</a></li>
<li id=”resources”><a href=”#resources”>Recursos</a></li>
<li id=”contact”><a href=”#contact”>Contacto</a></li>
</ul>
</div>

CSS

#navigation {
background: #FFF url(pix/bgMenu.gif) left repeat-x;
width: 450px; /* Ancho del contenedor de nuestro menú*/
height: 35px; /*Altura del contenedor de nuestro menú*/
margin:auto;
}

#navigation ul {
display: block;
list-style: none;
background: #FFF url(“pix/my_nav.png”) top left no-repeat;
margin: 0;
padding: 0;
width: 280px; /*Ancho de nuestro menú (la imagen)*/
height: 35px; /*Altura de la imagen*/
}

#navigation ul li {
float: left;
position: relative;
z-index: 100;
margin: 0;
padding: 0;
width: 70px; /*Ancho de cada item u opción de nuestro menú*/
height: 35px; /*Altura de cada item*/
}

#navigation ul li a {
display: block;
text-decoration: none;
text-indent: -999em;
width: 70px; /* Ancho de cada link de nuestro menú*/
height: 35px; /* Alto de cada link*/
}

#navigation ul li a:hover,
#navigation ul li a.current {
background-image: url(“pix/my_nav.png”); /* Estado activo*/
background-repeat: no-repeat;
}

#navigation ul li#home a:hover { background-position: 0px -35px; }
#navigation ul li#home a.current,
#navigation ul li#home a.current:hover { background-position: 0px -70px; }

#navigation ul li#tutorials a:hover { background-position: -70px -35px; }
#navigation ul li#tutorials a.current,
#navigation ul li#tutorials a.current:hover { background-position: -70px -70px; }

#navigation ul li#resources a:hover { background-position: -140px -35px; }
#navigation ul li#resources a.current,
#navigation ul li#resources a.current:hover { background-position: -140px -70px; }

#navigation ul li#contact a:hover { background-position: -210px -35px; }
#navigation ul li#contact a.current,
#navigation ul li#contact a.current:hover { background-position: -210px -70px; }

#navigation ul li a.current:hover { cursor: default; }

Exemplo

Fonte: http://www.infectedfx.net/

Slide Menu em CSS

Um efeito bem interessante para um menu em html

HTML

<script type=”text/javascript” language=”javascript” src=”focus_slide.js”></script>

<ul id=”mContainer”>
<li><a href=”#” title=”Item One”>Item One</a></li>
<li><a href=”#” title=”Item Two”>Item Two</a></li>
<li><a href=”#” title=”Item Three”>Item Three</a></li>
<li><a href=”#” title=”Item Four”>Item Four</a></li>
<li><a href=”#” title=”Item Five”>Item Five</a></li>
</ul>

JavaScript(salve em um arquivo com o nome focus_slide.js)

/******************************************************
Focus Slide
version 1.0
last revision: 12.17.2004
steve@slayeroffice.com

Should you improve upon or
modify this code, please let me know
so that I can update the version hosted
at slayeroffice.

PLEASE LEAVE THIS NOTICE INTACT!

******************************************************/

//window.onload = init;

var d=document;        // shortcut reference to the document object
var activeLI = 0;        // the currently “active” list element – value represents its index in the liObj array
var zInterval = null;    // interval variable

var SLIDE_STEP = 8;    // how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 74;    // the width of the sliding div. used to calculate its left based on the width and left of the active LI element

function init() {
// bail out if this is an older browser or Opera which gets the offsets wrong
// the opera issue is fixable by subtracting the container UL’s width from the offsetLefts…but I dont care enough to do it
// this does NOT break opera, it just wont get the sliding thing

if(!document.getElementById || window.opera)return;

// create references to the LI’s
mObj = d.getElementById(“mContainer”);
liObj = mObj.getElementsByTagName(“li”);

// set up the mouse over events
for(i=0;i<liObj.length;i++) {
liObj[i].xid = i;
liObj[i].onmouseover = function() { initSlide(this.xid); }
}

// create the slider object
slideObj = mObj.appendChild(d.createElement(“div”));
slideObj.id = “slider”;

// position the slider over the first LI
x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 – SLIDER_WIDTH/3)-5;
y = liObj[activeLI].offsetTop-3;
slideObj.style.top = y + “px”;
slideObj.style.left = x + “px”;
}

function initSlide(objIndex) {
// return if the user is mousing over the currently active LI
if(objIndex == activeLI)return;
// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
clearInterval(zInterval);

// set the active list item to the object index argument
activeLI = objIndex;
// figure out the destination for the sliding div element
destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 – SLIDER_WIDTH/3))-5;
// start the interval
intervalMethod = function() { doSlide(destinationX); }
zInterval = setInterval(intervalMethod,10);
}

function doSlide(dX) {
// get the current left of the sliding div
x = slideObj.offsetLeft;
if(x+SLIDE_STEP<dX) {
// div is less than its destination, move it to the right
x+=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else if (x-SLIDE_STEP>dX) {
// div is more than its destination, move to the left
x-=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else  {
// div is within the boundaries of its destination. put it where its supposed to be
// and clear the interval
slideObj.style.left = dX + “px”;
clearInterval(zInterval);
zInterval = null;
}
}

CSS

#mContainer {
position:relative;
margin:0 auto;
height:25px;
background-color:#F1F1F1;
border-bottom:2px solid #E2E2E2;
text-align:center;
padding:5px 0 0 0;
}

#mContainer li {
position:relative;
display:inline;
margin:0 10px 0 12px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:0;
z-index:2;
}

#mContainer li a         {text-decoration:none;}
#mContainer li a:link    {color:#999;}
#mContainer li a:visited {color:#333;}
#mContainer li a:hover      {color:#DA0911;}

#slider {
position:absolute;
/*background-color:#CFDCFF;
border:1px solid #78919B;*/
border-bottom:3px solid #DA0911;
width:74px;
height:20px;
padding:0;
z-index:1;
}

Fonte: http://www.infectedfx.net/

Tabelas em Zebra

Você também acha muito trabalhoso ficar colocando cor um linha sim e outra não em uma tabela? Quem sabe esta dica o ajude

HTML

<table align=”center” id=”default” summary=”Ejemplo de tabla”>
<caption>
Autores en InfectedFX.net
</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Ocupación</th>
<th>Website</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3″>Total: 4 Usuarios </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Infected-FX</td>
<td>Diseñador</td>
<td><a href=”http://www.infectedfx.net”>www</a></td>
</tr>
<tr>
<td>Zetta</td>
<td>Developer</td>
<td><a href=”http://www.zetaweb.net”>www</a></td>
</tr>
<tr>
<td>Zillah</td>
<td>A.I.</td>
<td><a href=”http://www.blogzillah.com”>www</a></td>
</tr>
<tr>
<td>Hecgo</td>
<td>Developer</td>
<td><a href=”http://www.hecgo.com”>www</a></td>
</tr>
</tbody>
</table>

CSS

#default {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#default caption{
background-color:#59819F;
border-bottom:3px solid #C2DBEF;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#default thead th{
background-color:#18394F;
border-bottom:3px solid #59819F;
color:#FFF;
padding:5px;
}

#default tbody tr td {
padding: 3px 8px;
}

#default tfoot tr td{
background-color:#59819F;
color:#FFF;
padding:4px;
text-align:center;
}

/*/////////////// TABLE DEMO GREEN //////////////////*/

#demoGreen {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#demoGreen caption{
background-color:#99CC00;
border-bottom:3px solid #669900;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#demoGreen thead th{
background-color:#333;
border-bottom:3px solid #000;
color:#FFF;
padding:5px;
}

#demoGreen tbody tr td {
padding: 3px 8px;
}

#demoGreen tfoot tr td{
background-color:#666;
color:#FFF;
padding:4px;
text-align:center;
}

/*/////////////// TABLE DEMO BLUE //////////////////*/
#demoBlue {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#demoBlue caption{
background-color:#50ADEA;
border-bottom:3px solid #1975D7;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#demoBlue thead th{
background-color:#F5F5F5;
border-bottom:3px solid #CCC;
color:#666;
padding:5px;
}

#demoBlue tbody tr td {
padding: 3px 8px;
}

#demoBlue tfoot tr td{
background-color:#E7E7E7;
color:#B7B7B7;
padding:4px;
text-align:center;
}

JavaScript

<script type=”text/javascript”>
// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode(“class”) != null) {
result = obj.getAttributeNode(“class”).value;
}
return result;
}

function stripe(id) {

// the flag we’ll use to keep track of
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : “#F0F8FF”;
var oddColor = arguments[2] ? arguments[2] : “#C2DBEF”;

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we’ll have to get the list of child
// <tbody>s
var tbodies = table.getElementsByTagName(“tbody”);

// and iterate through them…
for (var h = 0; h < tbodies.length; h++) {

// find all the <tr> elements…
var trs = tbodies[h].getElementsByTagName(“tr”);

// … and iterate through them
for (var i = 0; i < trs.length; i++) {

// avoid rows that have a class attribute
// or backgroundColor style
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {

// get all the cells in this row…
var tds = trs[i].getElementsByTagName(“td”);

// and iterate through them…
for (var j = 0; j < tds.length; j++) {

var mytd = tds[j];

// avoid cells that have a class attribute
// or backgroundColor style
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {

mytd.style.backgroundColor =
even ? evenColor : oddColor;

}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}
</script>

<script type=”text/javascript”>
window.onload = function() {
stripe(‘default’);
stripe(‘demoGreen’, ‘#ECFFAF’, ‘#F3FFCF’);
stripe(‘demoBlue’, ‘#FFFFFF’, ‘#F6F6F6′);
stripe(‘demoRed’, ‘#FFEFEF’, ‘#EFC2C2′);
}
</script>

Exemplos

Fonte: http://www.infectedfx.net/

Formulario elegante

Vou mostrar como fazer um formulário ficar mas atraente usando css e algumas pequenas imagens.

Precisaremos:

• icon_user.gif
• icon_pass.gif
• bgForm.gif

HTML

<form action=”#” method=”post” name=”formLogin”>
<fieldset>
<legend>Acceso a usuarios </legend>
<p>

<label for=”username1″ accesskey=”n”>Username: </label>
<input id=”username1″ name=”username1″ tabindex=”1″ value=”" title=”username1″ type=”text”>
</p>
<p>
<label for=”password2″ accesskey=”e”>Password:</label>
<input id=”password2″ name=”password2″ tabindex=”2″ title=”password2″ type=”password2″>
</p>
<p>

<input value=”Ingresar” id=”submit3″ class=”button” tabindex=”3″ type=”submit”>
</p>
</fieldset>
</form>

CSS

.formLogin {
width: 250px;
margin:auto;
font-size:10px;
}

.formLogin fieldset {
background:#F9F9F9 url(pix/bgForm.gif);
border:1px solid #CCC;
padding: 10px;
margin: 0;
}

.formLogin fieldset legend {
color:#666;
}

.formLogin label {
display: block;
float: left;
padding: 0;
width:70px;
margin:5px 5px 5px 0px;
}

.formLogin fieldset label:first-letter {
color:#999;
}
.formLogin input {
width:50%;
border:1px solid #A0A0A0;
font-size:10px;
padding:3px 0px 3px 25px;
}
.formLogin input#username {
background:#FFF url(pix/icon_user.gif) no-repeat left;
}
.formLogin input#password {
background:#FFF url(pix/icon_pass.gif) no-repeat left;
}

.formLogin input.button {
width:95%;
background-color:#C2C7C0;
border:1px solid #A0A0A0;
padding:3px;
color:#FFF;
}

Fonte: http://www.infectedfx.net/

Este exemplo esta no link acima no arquivo compactado

Menu horizontal em lista

Aprendendo a fazer um Menu horizontal com listas

HTML

<div id=”menu”>
<ul id=”menuList”>
<li id=”active”><a href=”#”>Item 01 </a></li>
<li><a href=”#”>Item 02 </a></li>
<li><a href=”#”>Item 03 </a></li>
<li><a href=”#”>Item 04 </a></li>
<li><a href=”#”>item 05 </a></li>
</ul>
</div>

CSS

/* CONTENEDOR DEL MENU*/
#menu {
margin:25px 0px 0px 0px;
padding:0px;
border-bottom:4px solid #000;
}

/* LISTA DEL MENU */
#menuList {
list-style-type: none;
padding:0px 0px 24px 30px;
margin: 0px;
}

/* OPCIONES DEL MENÚ */
#menuList li {
float: left;
height: 24px;
margin: 0px 1px 0 1px;
}

/* LINKS GENERALES EN EL MENÚ*/
#menuList a {
float: left;
display: block;
text-decoration: none;
padding: 5px 15px 5px 15px;
}

#menuList a:link,
#menuList a:visited {
background-color:#CCC;
color: #333;
}

#menuList a:hover {
background: #333; color:#FFF;
}

/* OPCION ACTIVA */
#menuList li#active a:link,
#menuList li#active a:visited {
background-color: #000;
color:#FFF;
}

#menuList li#active a:hover {
background-color:#A90000;
color: #FFF;
}

Exemplo

Fonte: http://www.infectedfx.net

Pulldown apartir de uma lista

Para quem tem pouco espaço para um menu, uma boa dica é este pulldown

HTML

<a title=”Mi Lista” onclick=”show_list(); return false;”  href=”#”>
<img src=”pulldown.gif” width=”200″  height=”20″ alt=”" />

</a>
<div style=”visibility: hidden;” id=”myList” onmouseover=”show_list()” onmouseout=”hide_list()”>
<ul>
<li> <a title=”InfectedFX” href=”http://infectedfx.net/”>InfectedFX</a> </li>
<li> <a title=”KonceptoRadio” href=”http://konceptoradio.com/”>KonceptoRadio</a> </li>
<li> <a title=”Cinexcepcion” href=”http://cinexcepcion.com/”>Cinexcepci&oacute;n</a> </li>

<li> <a title=”Go2torials” href=”http://go2torials.com/”>Go2torials</a> </li>
<li> <a title=”Spiga” href=”http://spiga.com.mx/”>Spiga</a> </li>
</ul>
<p class=”close”>
<a title=”cerrar…” onclick=”hide_list(); return false;”  href=”#”>cerrar</a>

</p>
</div>
</div>

JavaScript

<script type=”text/javascript”>
function show_list () { document.getElementById(“myList”).style.visibility = “visible”; }
function hide_list () { document.getElementById(“myList”).style.visibility = “hidden”; }
</script>

CSS

<style type=”text/css” media=”screen”>
body {
margin: 0px;
padding: 0px;
background-color: #FFF;
font: 69% Verdana, Arial, Helvetica, sans-serif;
}

a    {outline:none; text-decoration:none;}

/* POSICION */

#pulldown {
margin:10%;
}

#pulldown img{border:none;}

/* LISTA */

#myList {
background-color: #fff;
border: 1px solid #dfdfdf;
display: block;
margin: 1px 0px 0px 0px;
padding: 0;
width: 200px;
}

#myList ul  {
list-style-type: none;
margin: 0;
padding: 0;
}

#myList ul li a {
display: block;
width: 190px;
padding:3px;
margin: 2px auto 4px auto;
border-bottom:1px solid #EEE;
}

#myList ul li a:link,
#myList ul li a:visited{
background-color:#FFFFFF;
color: #a80000;
}
#myList ul li a:hover {
background-color: #F7F7F7;
color: #000000;
}

/* BOTON CERRAR */
.close {margin:0px;}

.close a{
text-align:center;
display:block;
font-weight:bold;
padding:3px 0px;
}

.close a:link,
.close a:visited{
background-color:#EEE;
color:#333;
}

.close a:hover{
background-color:#990000;
color:#FFF;
}
</style>

Exemplo

Fonte: http://www.infectedfx.net/

Slides com JavaScript

Um ótimo recurso, segue abaixo

HTML

<!– CONTENEDOR –>
<div id=”slides_content”>
<!– LISTADO DE ITEMS –>
<ul class=”buttons”>
<li><a id=”current” href=”javascript:void(0)” onclick=”change(0,this);”>Slide 01</a></li><li><a href=”javascript:void(0)” onclick=”change(520,this);”>Slide 02</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1040,this);”>Slide 03</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1560,this);”>Slide 04</a></li>
</ul>

<!– ELEMENTOS –>
<div id=”elementos” style=”width:2100px; margin:0 0 0 0;”>
<!– SLIDE 01 –>

<div class=”slide 1″>
<h2>Title Content Slide 01</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 02 –>
<div class=”slide 2″>

<h2>Title Content Slide 02</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<!– SLIDE 03 –>
<div class=”slide 3″>
<h2>Title Content Slide 03</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 05 –>
<div class=”slide 4″>
<h2>Title Content Slide 04</h2>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>

</div>
<!– TERMINA ELEMENTOS –>
</div>
<!– TERMINA EL CONTENDOR –>

JavaScript

/*//////////////////////////////////////////////////////////
/////////////Codigo original: Azer Koçulu//////////////////
/////////////Modificado: Infected-FX//////////////////////
/////////////////www.infectedfx.net//////////////////////
///////////////////////////////////////////////////////*/

function change(x,item)
{
document.getElementById(“current”).id = “”;
item.id = “current”;
if((x * (-1))<(getElementPosition(“elementos”).left – 10)){
distance = (x + getElementPosition(“elementos”).left) / 5;
start = getElementPosition(“elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + ((start * (-1)) + (i*5)) + “px\”", i*5);
if(i==distance){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + x + “px\”", i*5);
}
}
}else if((x * (-1))>(getElementPosition(“elementos”).left)){
distance = ((x + getElementPosition(“elementos”).left) / 5) * (-1);
start = getElementPosition(“elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + ((start * (-1)) – (i*5)) + “px\”", i*5);
if(i==distance)
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + x + “px\”", i*5);
}
}
}

function getElementPosition(object){
var position = new Object;
position.left = parseInt(document.getElementById(object).style.marginLeft)
position.top = parseInt(document.getElementById(object).style.marginTop)
return position;
}

CSS

/*///////////////////
///// SLIDES JS /////
///////////////////*/

/* GENERALES*/

body {
font:12px Arial, Helvetica, sans-serif;
color:#818181;
}

a {
outline:none;
text-decoration:none;
}

a:link,
a:visited {color:#006699;}
a:hover {color:#00CCFF;}

.center {text-align:center;}

/* CONTENIDO GLOBAL*/
#slides_content {
width:520px; /* ANCHO DEL CONTENEDOR*/
overflow:hidden;
margin:auto;
}

/* HEADERS */
#slides_content h2 {
font:24px Arial;
letter-spacing:-1px;
font-weight:bold;
margin:5px;
color:#FF6600;
}

/* SLIDE */
#slides_content .slide {
float:left;
width:500px; /* ANCHO DE CADA SLIDE */
height:300px; /* ALTURA DE CADA SLIDE */
padding:10px;
border-top:5px solid #7596B7;
}

/* LISTA DE ITEMS */
.buttons{
text-align:center;
width:500px; /* ANCHO DEL MENU */
clear:both;
display:block;
list-style:none;
white-space: nowrap;
padding:0px;
margin:0px 0px 0px 0px;
}

.buttons li{
display: inline;
list-style-type: none;
}

.buttons li a{
text-align:center;
margin:0px 3px 0px 0px;
padding:8px 14px;
line-height:31px;
}

.buttons li a:link,
.buttons li a:visited{
background-color:#B5CADF; color:#000;
}

.buttons li a:hover{
color:#FFFF00;
background-color:#7596B7;
}

.buttons li a#current{
background-color:#7596B7;
color:#FFF;
}

Exemplo

Fonte: http://www.infectedfx.net/

Codificador de endereço de e-mail

Está eu não conhecia, estava eu navegando pelo Stumble e pimba, dei de cara com o E-mail Address Encoder, basta colocar o endereço de e-mail clicar no botão “encode”, prontinho teu endereço de e-mail codificado

Gerador de listras

Para aqueles iguais a mim que sempre tem alguma dificuldade em fazer uma imagem em listras, eis aqui a solução, Stripe Generator

Confira dicas para evitar spams e outras pragas virtuais

Com o início do ano os piratas cibernéticos preparam novas ameaças para usuários de e-mail em todo o planeta, entre elas spams, vírus e ataques de phishing e malwares. Confira algumas dicas que ajudam a evitar essas pragas virtuais.

1) Não abra

Sempre que possível não abra spams. Essas mensagens normalmente vêm acompanhadas de softwares que permitem que o seu criador saiba quantos e quais endereços receberam e abriram a mensagem. Um email suspeito quase sempre é um spam.

2) Não responda

A melhor forma de lidar com e-mails de endereços suspeitos ou desconhecidos é excluí-los ou deixar que um filtro antispam coloque-os em quarentena. Se responder a um spam, mesmo solicitando sua remoção da lista, você estará confirmando ao remetente que esse é um endereço válido e provavelmente sua caixa de correio será alvo de mais spams. Na dúvida sobre a legitimidade de uma mensagem solicitando informações, entre em contato com a empresa ou digite o URL da companhia no seu navegador.

3) Não clique

Se clicar em um link (mesmo em “unsubscribe”) da mensagem, poderá infectar seu computador com um spyware ou vírus. Exclua o email imediatamente. Caso a mensagem pareça ser do seu banco, operadora de cartão de crédito ou qualquer outra empresa solicitando a validação das suas informações, não o faça. Eles já possuem informações sobre sua conta, portanto não precisam de qualquer tipo de validação ou confirmação. Exclua a mensagem. Se estiver em dúvida, ligue diretamente para a empresa.

4) Não compre

Os spams existem porque são lucrativos. Não custa praticamente nada para o criador do spam enviar milhões de mensagens. Se uma das pessoas cair, ele já está no lucro. Nunca compre nada anunciado em spams e peça para os seus amigos e familiares fazerem o mesmo, por mais atraente que a oferta possa parecer.

5) Não use seu endereço de e-mail principal

Fornecer seu endereço principal em qualquer lugar na web é um grande risco e ótimo para os criadores de spam. Para transações on-line, use um segundo endereço.

6) Confiras as políticas de segurança

Cuidado ao fornecer informações em newsgroups, preencher formulários na web ou fornecer seu endereço eletrônico em sites. Confira as políticas de segurança do site para garantir que seu email não será compartilhado com outras empresas.

7) Verifique se o seu provedor possui proteção contra spams, vírus e spyware

Os spams normalmente contêm vírus, daí a importância da proteção antispam e antivírus . As mensagens de spam freqüentemente possuem links para sites com spywares ou malwares. Verifique junto ao seu provedor ou departamento de TI se há proteção contra esses tipos de ameaças. A proteção contra spams, vírus e malwares no gateway podem fazer toda a diferença.

Use seu bom senso

Se para você parece spam, provavelmente deve ser. Exclua.

Fonte: http://wnews.uol.com.br

Usando o IE6 e o IE7 juntos(standalone)

Neste vídeo irei mostrar como usar o microsoft internet explorer 6(ie6) e o 7(ie7) no mesmo pc, sem a necessidade de um “emulador”.

Segue o Vídeo

Arquivos necessários

1. Baixe o IE7-WindowsXP-x86-enu.exe ( ou pela site Internet Explorer 7 download page).
2. Baixe o Internet Explorer 7 standalone program only (149KB)

Artigo compelto

Min-Height para Internet Explorer

Não sei por que cargas d’água M$ internet explorer não lê corretamente o “min-height”, bom procurei no google e achei um esquema legal, que funcionou, segue abaixo:

Cascading Style Sheet
/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

Fonte: http://www.cssplay.co.uk/boxes/minheight.html

Robots.txt – Controlando o que os mecanismos de busca NÃO devem indexar

O arquivo robots.txt já é um padrão utilizado no mundo inteiro para declarar aos mecanismos de busca o que eles não devem indexar em um site. Esta é uma técnica “antiga”, mas ainda muito útil e que mesmo assim, muitos ainda desconhecem. Este texto é uma compilação das anotações que tenho feito sobre a utilização de robots.txt e que podem ser úteis para qualquer pessoa que queira esconder qualquer coisa que esteja disponível na web mas que por uma razão ou outra deve ser privada e não indexada pelos mecanismos de buscas.

A primeira coisa que você deve saber é que robots.txt não é usado para indicar o que os mecanismos de buscas DEVEM indexar e sim o que NÃO DEVEM! Você vai precisar usar robots.txt, por exemplo, em uma intranet que funcione na web e que pode conter informações que dizem respeito exclusivamente a uma empresa. Áreas restritas, documentos pessoais que são armazenados no seu servidor em uma determinada pasta e que só estão lá por backup ou para compartilhar informações entre um pequeno grupo etc, são contextos possíveis em que os mecanismos de buscas não devem indexar o conteúdo.

Se você quer que o Google ou qualquer outro mecanismo de busca indexe todo o seu conteúdo, você não precisa usar robots.txt. Mesmo que isso pareça óbvio, muitas pessoas se enganam sobre a utilização deste recurso.

Você precisa tomar alguns cuidados ao criar um arquivo de robots.txt como:

robots.txt é apenas um arquivo de texto que pode ser criado no notepad ou qualquer outro editor de texto ASCII e que salve com a extensão .txt. Lembre-se que não pode ser um html, tem que ser um txt.

Este arquivo deve ficar na raiz do seu site.

O nome do arquivo deve ser todo em letras minúsculas (lowercase) e nunca com letras maiúsculas. Ou seja, para qualquer site que queira implementar ele deverá se chamar robots.txt

Basicamente existem duas regras a serem declaradas neste arquivo. O User-Agent e o Disallow.

A regra “User-Agent” é usada para declarar um user agent específico. Um user-agent neste contexto é um mecanismo de busca como por exemplo o Googlebot:

User-Agent: Googlebot

Se quiser que todos os user agents (e não somente o robô do Google) indexe o conteúdo, use asterisco como valor de User-Agent. Dessa forma você informa que todos os mecanismos de busca não devem indexar:

User-Agent: *

A regra Disallow é usada para indicar quais os locais onde os mecanismos de busca não devem “entrar”.

Para bloquear um site inteiro use uma barra como no exemplo abaixo:

Disallow: /

Para bloquear um diretório específico, use o nome do diretório entre barras como no exemplo:

Disallow: /private_directory/

Para bloquear uma página específica, use uma barra e o nome do arquivo.

Disallow: /private_file.html

Você pode usar quantas regras Disallow você quiser. Basta apenas iniciar outra linha. Lembre-se que urls são case sensitive. Se você tem um arquivo de html chamado Teste.html e no valor de Disallow coloca “teste.html”, o mecanismo de busca não vai considerar ambos como sendo o mesmo arquivo.

Em alguns casos, você pode querer declarar para os mecanismos de busca que não sigam determinada página na própria página utilizando a meta tag nofollow da seguinte maneira:

<meta name="robots" content="nofollow">

Com robots.txt você tem controle do que não deve ser indexado em uma escala maior do que a meta tag nofollow. De qualquer maneira ambas as soluções tem exatamente o mesmo objetivo: impedir com que mecanismos de busca indexem o conteúdo referenciado.

Todas as informações neste texto foram retiradas das referências abaixo!

RobotsTXT.org

Google Support

Google Blog: Robots Exclusion Protocol

Controlling how search engines access and index your website

 

Autor: Henrique Costa Pereira

Fonte: http://www.imasters.com.br/

TENHA UM CSS DIFERENTE PARA CADA HORA DO DIA

É o que propõe em seu site Katherine Angela Gallia, ela utiliza 6 folhas de estilo diferentes em seu site para determinados horários do dia somente utilizando JavaScript, ela utiliza-se do seguinte código:

<script language="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";

var css = '< '; css+='link rel="stylesheet" href=' + display + ' /'; css+='>';

document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>

Onde:

• Das 5 ás 8 da manhã: Ela utiliza o tema sunrise.
• Das 8 da manhã até o Meio-dia: Ela utiliza o tema morning.
• Do Meio dia ás 3 da tarde: Ela utiliza o tema noon.
• Das 3 ás 6 da tarde: Ela utiliza o tema afternoon.
• Das 6 da tarde ás 9 da noite: Ela utiliza o tema sunset.
• E das 9 da noite ás 5 da manhã: Ela utiliza o tema twilight.

Caso o usuário navegue com o JavaScript desabilitado, ela utiliza o tema sunset:

<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Até me deu vontade de fazer isso aqui no meu blog agora.

Autor: Pedro Rogério
Fonte: http://www.pinceladasdaweb.com.br/

SEO como otimizar seu site para ficar no topo das buscas

Bem, com este POST, pretendo passar um pouco de minha experiência em divulgação de sites.

Muitos me perguntam, como deixar meu site no topo das buscas?

Bem, esta tarefa não é facil, você não conseguirá da noite para o dia [ a não ser que tenhas um site de conteudo adulto ], digo que em uns dois meses, você, com muito trabalho conseguirá ficar no topo das buscas.

Como? 

Simples, estudando.

Vou tomar por exemplo um site meu, para poder exemplificar e passar o conhecimento. odns.com.br

Primeiro passo:

Qual o segmento, assunto mais falado no site?

No meu caso do odns.com.br o assunto mais falado nele, e o proposito do site é. Hospedagem gratuita de arquivos, imagens e videos.

Pronto, ao definir sobre o que meu site falará, já posso definir quais palavras irei “ranquear” nele. Neste caso, vou ranquear.

Hospedar arquivos

Hospedar imagens

Hospedar vídeos

Hospedagem gratuita .

Lembre-se, nem sempre você será a primeira posição, mas estando na primeira pagina, você tem 50% de chances de ganhar uma visita com estas buscas.

Após escolher as palavras chave de nosso site, vamos coloca-las nas meta-tags, no titulo e na descrição de nosso site, para quem não sabe, estas são as tags que ficam no <head> do documento.

<META Lang="pt" NAME="Description" content="" />
<META NAME="Keywords" content="" />
<META Lang="pt-br" NAME="Keywords" content="" />
<META Lang="pt-br" NAME="Keywords" content="" />
<META NAME="abstract" CONTENT="">
<META NAME="Generator" CONTENT="" />

Sim, tem diferença de pt, pt-br, en, dentre outros, isso informará ao nosso buscador, que em, por exemplo uma busca por portugues brasil, ele use a tag pt-br. Crie alguns textos descritivos no seu site, e coloque por exemplo no rodape. [ nada de texto escondido, isso só suja você ]

Criando links para estas palavras, apontando para áreas diferentes de seu site [ mas que aponte para o conteudo desejado, e apontado pelo link, lembre-se estamos trabalhando a favor, e não, contra o usuário ]

Exemplo?

odns.com.br trabalha para você hospedar arquivos, hospedar imagens gratuitamente, e também trabalha para você hospedar site free [ grátis ] em seu computador, você não precisa gastar nada, não precisa pagar mensalidade, não precisa pagar anuidade, para hospedar arquivos, hospedar imagens, hospedar site, basta você efetuar cadastro gratuitamente no odns, para enviar arquivos, hospedar imagens sem limite de tamanho, ou quantidade diária, utilize o odns.com.br para enviar arquivos, enviar imagens, criar seu serviço de dns totalmente gratuito na internet, você não pagará nada para efetuar o cadastro no odns.com.br. Cadastre-se agora, para Compartilhar imagens, Criar álbum de foto e muito mais, serviços que você somente encontrará Enviando imagens, Enviando arquivos para o odns.com.br.

Veja que tenho no meu texto, todas e mais algumas palavras que desejo ranquear, nas palavras que desejo ranquear, coloquei links para elas, apontando para a área desejada do site.

Muito bom, afinal, alem de ranquear nossas palavras em nosso site, estamos mostrando para o buscador que nosso conteudo é relevante para nós, afinal temos muitos links para nós mesmos Porém o feitiço vira contra você caso você exagere. 50 links por página está de bom tamanho.

Bem, esta é a parte facil. Apenas precisamos de tempo, e saber mecher em nosso html.

Agora vem nosso trabalho “braçal”

Vamos efetuar estas buscas no buscador, por exemplo, busque por “hospedar arquivos”.

Quem aparece onde você deseja aparecer? Se for algum fórum, você está com sorte. Cadastre-se no forum [ eu falei que era trabalho braçal, mas nada vem do nada ] Poste neste forum um texto explicando seu serviço apontando para seu site. [ não faça spam, um está bom ]

A proxima vez que o buscador passar por ali ele vai ver que aquele site que estava em primeiro, tem um link para você. Ponto para você. Se você conseguir fazer isso em 10 sites que estejam em primeiro, [ primeiro antes que você ] a proxima vez você será mais importante no resultado da busca.

Bem, explicado o principio do traballho braçal, no proximo post explicarei tecnicas menos braçais, com ótimos resultados.

Autor: ‘Luis Otávio’
Fonte: http://ajaxbox.com.br/

Esqueça o outsourcing. O negócio agora é o crowdsourcing

Claro, estou exagerando. Há alguns meses um artigo na revista Wired chamado The Rise of Crowdsourcing mostrou como a multidão pode ajudar organizações a completar tarefas e diminuir custos. O crowdsourcing é o “novo lugar da mão-de-obra barata: pessoas no dia-a-dia usando seus momentos ociosos para criar conteúdo, resolver problemas e até mesmo para pesquisa e desenvolvimento”.

Netflix
A Netflix é uma locadora de DVD’s dos EUA que aluga filmes pela internet e entrega pelos correios. Quebrou paradigmas e fez a Blockbuster rever seu negócio. Mas o que traz a Netflix para este artigo é que acabam de anunciar um prêmio de US$ 1 milhão a quem (sim, qualquer pessoa) desenvolver um algoritimo 10 % melhor no quesito sugestão de filmes do que o sistema atual deles. Já que exploram a Cauda Longa dos filmes, querem que as sugestões atinjam de forma mais certeira os gostos pessoais de cada um. É a essência do crowdsourcing: colocam a multidão para trabalhar e se alguém conseguir resultados, pagam.
Google
Recentemente o Google lançou um jogo on-line chamado Google Image Labeler. Um claro exemplo de crowdsourcing. As duplas precisam dar nomes às imagens que vão aparecendo na tela. Ganha-se pontos se os dois (desconhecidos entre si, localizados em diferentes partes da Terra) derem o mesmo nome à figura. Parece algo idiota mas é na verdade uma grande sacada. Ao invés de contratar pessoas para identificar as imagens, o Google resolveu usar o poder da multidão para completar a tarefa. Pessoas aleatórias ao redor do mundo jogam em duplas e ganham pontos. Essa é a recompensa delas. Dessa forma o Google consegue identificar milhões e milhões de imagens de forma rápida e barata.
DARPA
Não, nada a ver com o seriado Lost. Lá a sigla onipresente é DHARMA. O DARPA é um órgão militar do governo americano que faz pesquisas. E não é que eles usam o crowdsourcing para melhorar essas pesquisas? Desde 2004 organizam uma competição de carros robôs guiados por inteligência artificial. No ano passado finalmente um carro totalmente controlado por computadores conseguiu terminar a prova realizada no deserto. O próximo desafio é um carro inteligente conseguir trafegar em vias urbanas. Claro, os vencedores ganham um prêmio.
Juntando as peças
A Netflix e o DARPA procuram soluções para seus problemas. Mas investir internamente ou contratar outra empresa para realizar pesquisas sairia muito caro. A solução encontrada é deixar a multidão pensar. Centenas, milhares, talvez milhões de pessoas em um brainstorm. Uma ou outra idéia boa deve surgir, mas quase tudo é lixo. A vantagem: só se paga por resultado, ou seja, o custo pode parecer alto, mas dividido pela quantidade de cérebros envolvidos, acaba sendo um ótimo negócio.

O Google não paga em dinheiro, e sim em pontos. Dos pontos surge um ranking que gera satisfação para os que lá figuram. Tarefa realizada. E melhor: nada de problemas trabalhistas.

 

Autor: Alexandre Fugita
Fonte: http://www.techbits.com.br/

Saiba quando seus amigos do orkut estão online.

 

Você gostaria que o seu orkut tivessem alertas que nem o MSN? Já imaginou, saber ‘no exato’ momento que um de seus amigos ficou online no orkut? Ou então, receber quase que imediatamente um aviso de que há novos scraps a serem lidos????

Isso agora é possível com HiNew Scrap! Mas para isso é necessário que vc use o programa “Mozilla Firefox” que é um navegador de internet quase que idêntico ao “Internet Explorer”, só que MUITO MAIS SEGURO.

INSTALAÇÃO

•Para instalar a extensão Greasemonkey clique aqui. Veja as imagens a seguir:

Quando terminar de baixar a extensão ele pedira que você reinicie o Firefox, é só fechar todas as janelas e abrir o Firefox novamente.

Note que na barra de status do navegador apareceu o icone de um macaco (Lado inferior direito, logo acima do relógio), quando ele esta cinza a extensão está desativada, se clicar sobre o icone ele ficará colorido, ou seja, Ativado!

Se estiver tudo Ok vamos para o script.

INSTALAÇÃO

•Clique aqui para instalar o HiNew Scrap, veja a seguir como proceder:>

Observe que ao lado do icone aparece escrito que, “o script foi instalado com sucesso”.

Agora entre no seu orkut, note que foi adicionado um link no menu lá de cima ( | Notícias | HiNew | ? ) Clicando ali você configura o script.

Assim que um contato seu acessar o orkut ou quando alguém deixar um scrap pra você, você será avisado com uma plaquinha igual a do MSN, quando entra um contato.

Por enquanto é isso, qualquer duvida, reclamação ou problema deixe seu recado na comunidade do autor do Script: http://www.orkut.com/Community.aspx?cmm=9282113

Fonte: http://corumbabaca.wordpress.com/

Carregue seu site rapidamente, ou seu concorrente o sugará!

Introdução

Quando um visitante chega a seu site, o mesmo decide em quantos segundos que ele ficará ou se vai. A primeira impressão é a chave do sucesso! .

Pré-Requisitos

Noções de desenvolvimento para interpretação, uma tijela com Profilteróles e se possível um suquinho de manga

Objetivo

Entender o motivo pelo qual seu site com conteúdo pode ou não ser visitado por novos usuários com maior frequência, e não apenas os “paraquedistas” (aqueles visitantes que te encontram pelo google, pousam em seu site, e nunca mais retornam)

Conteúdo
Quando um visitante chega a seu site, o mesmo decide em quantos segundos que ele ficará ou se vai. A primeira impressão é a chave do sucesso!

Uma página que carrega rapidamente te ajuda a dar uma boa primeira impressão e faz com que seus visitantes fiquem mais tempo navegando em seu site. Por sua vez, aumenta as possibilidade de que eles possam começar a “cultivar o conteúdo” de seu site, retornando inúmeras vezes, e quem sabe você poderá converte-los em possíveis clientes.

Se seu site não carrega rapidamente, qualquer oportunidade que tiver de apresentar o seu conteúdo não se sobressairá.

Tenha em conta que quando seus visitantes estão cientes de que sua conexão a Internet é lenta (Dial-up por exemplo, conexão por telefone) e que tem que ser paciente, esperar a hora de navegar na rede, não esperam muito tempo para poder ver seu site. Se seu site não é exibido nos primeiros 8 a 10 segundos, o mais provável é que eles cliquem no botão “voltar” do browser, e busquem outro site com conteúdo do gênero, que possam visualizar rapidamente, com isto você estará perdendo um visitante e seu concorrente ganhando um.

Este artigo é extremamente importante!, principalmente se o seu site estiver focado ao público brasileiro e/ou latino, onde são maiores os casos de conexão dial-up.

Alguns “conselhos simples ”.

Uma maneira de fazer com que seu site carregue rapidamente é utilizar CSS (Cascading Style Sheets) no layout de suas páginas. Se você utiliza CSS, não inclua no código em cada uma de suas páginas, faça um arquivo externo e “chame-o” em suas páginas que utilizem o mesmo estilo que você definiu. Isto é bom por questões de usabilidade, mas também ajuda em termos de otimização para robôs de busca (principalmente para o mais cobiçado, Google!)

Evite a utilizaçãode imagens em demasica na mesma página, e se assegure de que todas as páginas que utilizem, estejam otimizadas para web.

Lembre-se de que a utilização de vídeo e áudio também aumentam o tempo de carregamento de seu site. O mesmo vale para as animações em Flash.

Também é importante de que seu site seja fácil de navegar, pois afinal, de que vale um site com um layout lindo, que carregue rapidamente, sendo que o usuário não encontra o que necessariamente procura?

 

Considerações Finais

Para as considerações finais deixo-lhes uma pergunta simples e objetiva que serve para se refletir:
“De que adianta o seu site ter conteúdo, se o visitante não o encontra com facilidade?”

Autor: Maurivan Luiz Padilha- Colunista deUsabilidade do Portal MXSTUDIO
Fonte: http://www.mxstudio.com.br/

Perolas#20 – Sem Parar

Sem Parar

iiiiiiiiéééééééé!!!!

Criação: Ricardo Yakamura

Produção: Ricardo Yakamura

Data: 04-07-2005

Fonte: http://www.desencannes.com/

Perolas#19 – KY

KY
Sabe quando entala? Eu não sei, mas sei que com KY isso não acontece. Agora, as crianças podem se divertir, sem choros, traumas e com a visão de uma futura adolescência menos irritadiça e sem processos judiciais a astros da música.

Criação: Edgar Linton
Produção: Edgar Linton
Data: 27-09-2005

Fonte: http://www.desencannes.com/

Perolas#18 – Jontex

Jontex
Uma pequena distração e pumba. Sua vida vai abismo abaixo. O álcool ajuda a errar, mas não serve como desculpas. Lembre-se: o airbag infla na barriga mas o peso que fica para a vida inteira é nas costas.

Criação: Marcos Santana
Produção: Marcos Santana
Data: 27-09-2005

Fonte: http://www.desencannes.com/

Perolas#17 – Brasil – Portugal

Brasil – Portugal
Tapados…

Criação: Luciana Lopes e Marcelo Anache
Produção: Luciana Lopes e Marcelo Anache
Data: 11-09-2006

Fonte: http://www.desencannes.com/

Perolas#16 – Finalmente um indecente decente.

Finalmente um indecente decente.
Quando lançaram o filme, o Desencannes foi atacado com inúmeras peças homenageando os cowboys de Brokeback Mountain. Esta foi a única que veio com jeitinho e delicadeza. Por isso, entrou.
Como diriam os próprios criadores da peça:
‘Um toque de humor para o lançamento de um filme tocante.’

Criação: Marcos e Hiram
Produção: Hiram e Marcos
Data: 09-11-2006

Fonte: http://www.desencannes.com/

Perolas#15 – Lactopurga

Lactopurga
Em caso de uso excessivo, reutilize a rolha.

Criação: Fabio Abrão
Produção: Fabio Abrão
Data: 17-11-2006

Fonte: http://www.desencannes.com/

Perolas#14 – Faça Fei

Faça Fei
Depois de biologia, química e física, português não é mais pré-requisito para entrar em algumas faculdades.

Criação: Ricardo S.Chiesa
Produção: Ricardo S.Chiesa
Data: 26-11-2006

Fonte: http://www.desencannes.com/

E-mail marketing em HTML

Este artigo é quase uma continuação do artigo anterior, intitulado Boas Práticas de E-mail Marketing. Após sua publicação, recebi algumas dúvidas quanto ao que seria, exatamente, um e-mail marketing em HTML. Por isso, primeiro, vamos definir o que é um e-mail sem formatação e um e-mail em HTML.

E-mail sem formatação é o tipo de e-mail a que estamos mais habituados: mensagens em texto puro que não requisita nenhuma informação do servidor (imagens, por exemplo) para ser elaborado. Você simplesmente escreve na tela de edição de mensagens e envia o e-mail. Ele chega para o destinatário também na forma de texto e sua aparência pode variar conforme a configuração da aplicação de e-mail de quem o recebeu.

E-mail em HTML é aquele que apresenta elementos da linguagem de hipertexto, como links e imagens que são exibidas diretamente no corpo do e-mail, sem estar em anexo à mensagem. Podemos exemplificar com aquelas enxurradas de e-mail que recebemos com promoção de assinatura de revistas, oferta de livros, aparelhos eletrônicos etc. Você abre a mensagem e, no corpo, pode ver imagens e textos diagramados de uma forma diferenciada, como se fosse um planfleto ou mesmo uma página da Web. É possível, ainda, utilizar CSS para formatar a aparência dos elementos.

Ao trabalhar com e-mail marketing, a grande maioria das empresas opta pelo e-mail em HTML, que confere maior liberdade de criação e a mensagem é, visualmente, mais atraente. É possível exibir logotipos, fotos de produtos, textos em fontes diferenciadas e distribuir os elementos da forma desejada na tela. Tudo isso sendo exibido diretamente no corpo da mensagem, e não como um anexo. Arquivos anexos aumentam sensivelmente o tamanho do e-mail, além de poderem ser barrados por algumas aplicações de e-mail, mesmo que sejam apenas imagens. Ao inserir imagens em um e-mail HTML, não inserimos o arquivo da imagem propriamente dito, mas sim, a tag HTML de imagem <img>, que fará referência ao arquivo do servidor. Portanto, para que você possa desenvolver um e-mail marketing em HTML utilizando todos os recursos visuais possíveis, é necessário possuir acesso a um disco virtual ou servidor web (se você possui um site ou domínio), que armazenará os arquivos de imagens.

Vamos ver, na prática, como construir um e-mail marketing em HTML. Como exemplo, vou criar um cartão que convide os usuários a visitarem o site do iMasters. Para isso, vou utilizar um software gráfico qualquer que me permita criar uma imagem. Utilizando o Adobe Illustrator (mas poderia ser também o Corel Draw, o Photoshop ou qualquer outro a que você esteja familiarizado), criei esta arte:

Para que um e-mail marketing seja visualizado corretamente na aplicação de email do cliente, pode-se trabalhar com: (X)HTML, CSS, JPEG, GIF estático e GIF animado. As aplicações de e-mail não interpretam conteúdo dinâmico (asp, php), flash ou javascript. Sobre o formato de imagem PNG, houve uma grande melhora nas novas versões de navegadores e de clientes de e-mail, que passaram a suportá-lo. Algumas versões mais antigas não conseguem exibir este formato, portanto, se não qusier arriscar, fique com o JPEG e o GIF.

Para que minha arte seja visualizada corretamente num e-mail, a transformei em imagem. Meu software permite que eu salve uma cópia otimizada para a web, ou seja, com 72 DPI de resolução e cores RGB, com a possibilidade de definir sua qualidade. Utilizei o formato GIF que, por possuir “apenas” 256 cores, mantém o tamanho do arquivo reduzido. E para que todos aqueles que receberem meu e-mail possam visualizar a imagem, preciso enviá-la para a Internet, armazenando o arquivo em um disco virtual ou dentro do servidor onde meu site está hospedado. É o mesmo processo de enviar os arquivos de um site para a web, de modo a disponibilizá-lo online. Neste caso, vou utilizar o porta-arquivos do Yahoo, que é gratuito e basta ter uma conta no Yahoo para usar. Seguindo as instruções do porta-arquivos, fiz o upload de minha imagem, cujo endereço depois de enviada ao disco virtual é http://us.f13.yahoofs.com/bc/45b0d469_114f2/bc/convite.gif?bfnpx3FBIy93hbLi. Se você clicar neste link poderá visualizar minha imagem. Para saber o endereço de sua imagem na Internet, basta clicar com o botão direito sobre o link do nome do arquivo e clicar na opção Copiar atalho ou Copy Link Location, isso, após enviá-la para o disco virtual, claro. Guarde este endereço.

Agora, vamos começar a construção do e-mail. Vou utilizar o Outlook Express, que me permite inserir código HTML na edição de mensagens. O Microsoft Outlook não oferece esta opção. Para enviar uma mensagem de e-mail a partir do Outlook Express, é preciso que você tenha uma conta de e-mail configurada com seus respectivos POP3 e SMTP (endereços do servidor por onde as informações irão trafegar e chegar até os destinatários). Se você tem uma conta no Gmail, pode configurar seu programa de e-mail para receber e enviar mensagens. Para ver as instruções, acesse sua conta do Gmail e, no canto superior direito da tela, clique em Configurações e na aba Encaminhamento e POP. Nesta aba, há um link de instruções no item 3.

Outlook configurado, vamos compor a mensagem. Clique no botão Criar E-mail. Nesta tela de composição de mensagens que foi criada, veja que, na parte inferior da janela, existem 3 abas: Editar, Origem e Visualizar. Se você não vê nenhuma aba, clique em Exibir > Editar código-fonte para que elas apareçam. Para inserir nosso código HTML, vamos usar a aba Origem. Note que, nesta aba, já existe a estrutura básica de um documento HTML:

Vou acrescentar códigos para inserir a imagem de meu convite, deixá-lo centralizado na tela e com um link para o site do iMasters. O código abaixo já está com a tag chamando a imagem do disco virtual e com o link. Se quiser, copie este código e cole-o na aba Editar do Outlook Express, substituindo aquela estrutura básica exibida acima.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3020" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV style="text-align:center">
<a href="http://www.imasters.com.br" title="Este link abre o site do iMasters em uma janela de seu navegador">
<img src="http://us.f13.yahoofs.com/bc/45b0d469_114f2/bc/convite.gif?bfflPsFBmgNmhbLi" alt="Visite o iMasters!">
</a>
</DIV>
</BODY>
</HTML>

Depois, ao clicar na aba Editar, podemos ver a imagem exibida diretamente no corpo da mensagem, da forma como o usuário visualizará em seu e-mail. Este procedimento de inserir uma imagem através de código HTML no e-mail faz com que o tamanho da mensagem seja reduzido. Note que meu arquivo GIF original tem 30,1 Kb, mas ao inserir apenas a tag HTML chamando a imagem que está no disco virtual, minha mensagem fica com apenas 2 Kb, porque é composta apenas de código. Assim, você pode enviar a mensagem para diversos destinatários sem sobrecarregar o servidor, já que a imagem será carregada no momento em que o usuário abrir. E, assim, eu visualizo a imagem, que está sendo “baixada” lá do disco virtual:

Se você não tem familiaridade com a linguagem HTML, pode desenvolver sua mensagem em um editor como o Microsoft Frontpage ou o Dreamweaver. Eles têm interface amigável e, ao longo do desenvolvimento, geram o código do que foi criado através de simples cliques em botões. Selecione o código, copie e cole na aba Origem do Outlook Express.

E está pronto nosso e-mail em HTML! Basta inserir os destinatários na mensagem e enviar. Este foi um exemplo simples de e-mail formatado em HTML. Você pode construir layouts mais complexos e que utilizem outros recursos do HTML e do CSS. Apenas lembre-se das recomendações para o desenvolvimento de um bom e-mail marketing. Se você pretende enviar a mensagem para muitas pessoas, considere trabalhar com ferramentas próprias para e-mail marketing – que não o Outlook -, pois elas trazem também recursos para medir o impacto de sua campanha nos usuários: quantos abriram a mensagem, quantos clicaram, quais e-mails falharam etc.

Recapitulando, para o desenvolvimento do e-mail marketing, temos:

• um arquivo da arte original (neste caso, em Illustraor);
• um arquivo GIF da arte (gerado a partir do Illustrator mesmo);
• o envio da imagem para a Internet (disco virtual do Yahoo);
• a construção do código HTML utilizando o endereço da imagem na Web;
• inserção do código HTML no aplicativo de e-mail;
• envio da mensagem;

Espero que tenha ficado claro, mas, quaisquer dúvidas, estou à disposição!

Boa sorte e sucesso!

Autor: Juliana Padron
Fonte: http://www.imasters.com.br/

Conhecendo a estrutura de diretorios do GNU/Linux

Carnaval chegando… vai começar a folia… e eu, antes de curtir minhas merecidas férias (estou enganando quem? vou viajar carregado de manuais para a prova da LPI), deixarei um artigo sobre a estrutura de diretórios do Linux. É um assunto chato para a maioria das pessoas… afinal, quem quer saber sobre diretórios? A grande jogada é só instalar e usar certo? Mas o Linux tem suas diferenças e temos que respeita-las. Dê um crédito para o pingüim, não custa nada aprender um pouco mais sobre esse belo sistema operacional .

Bom, esse artigo é voltado para o leitor que está migrando ou começou agora a utilizar o Linux e ainda está perdido no meio de uma centena de diretórios, e como acontece em quase todos os meus artigos, eu adiciono uma leve pitada de linguagem técnica.
Antes de começar-mos, eu gostaria de esclarecer que o conceito é basicamente o mesmo, muda-se alguns nomes mas a idéia de diretório é a mesma em vários sistemas operacionais.

Introdução:

O sistema de arquivos (File System, em inglês) é uma estrutura composta de Arquivos e Diretórios. O sistema de arquivo, pelo menos teoricamente, é infinito. O limite é imposto somente pelo tamanho do disco rígido. O Linux utiliza um sistema hierárquico onde cada tipo de dados tem seu lugarzinho específico para ser guardado. Essa hierarquia é conhecida como “estrutura de árvore invertida” (aposto uma cerveja como muitos não sabiam dessa!), e o topo é chamado de diretório raiz, que é representado por “/”.

Essa conversa poderia se estender a: “tipos de arquivos” e então teríamos “arquivos simples”, “arquivos-diretório”, “arquivos especiais”. É um assunto tão infinito quanto a teoria da própria estrutura.

Até aí tudo bem?

Habitua-se!

Quem cai de paraquedas no mundo do Linux fica em choque se perguntando se existe alguma coisa parecida com o Windows. No Windows, os arquivos do sistema ficam no diretório “Windows” e os programas em “Arquivos de Programas”. O Linux lida com isso ao contrário, no diretório raiz só existe as pastas do sistema e os seus arquivos pessoais são guardados dentro do diretório home, que é criada para cada usuário.

Dentro do Linux as partições, pendrivers, cdrom não aparecem como: C:\ , D:\ , E:\… Tudo faz parte do diretório raiz, ou seja, para o sistema todo mundo é diretório independente do dispositivo.

Uma descrição básica dos diretórios:

“Trecho retirado do meu livro: Ubuntu, Guia Pratico para Iniciantes que será lançado este mês”

Vamos conhece-los de acordo com a FHS (Filesystem Hierarchy Standard):

Todos os diretórios abaixo então dentro do diretório raiz, ou seja, “/”.

/bin : Arquivos e programas do sistema que são usados com freqüência pelos usuários.

/boot : Arquivos necessários para a inicialização do sistema.

/cdrom : Ponto de montagem da unidade de CD-ROM.

/dev : Arquivos usados para acessar dispositivos do computador.

/etc : Arquivos de configuração do computador.

/floppy : Ponto de montagem de unidade de disquetes

/home : Diretório que contém os arquivos de cada usuário.

/lib : Bibliotecas do sistema.

/lost+found : Local de arquivos e/ou diretórios recuperados pelo sistema.

/mnt : Ponto de montagem temporário.

/proc : Sistema de arquivos do Kernel.

/root : Diretório do usuário root, o administrador do sistema.

/opt : Local para aplicativos opcionais serem instalados.

/media : Ponto de montagem de mídia removível, câmeras digitais, pendrives

/sbin : Diretório de programas usados pelo superusuário (root) para administração e controle do funcionamento do sistema.

/tmp : Arquivos temporários criados por programas.

/usr : Diretório dos aplicativos. A maioria estará instalada neste diretório. Curiosidade: usr não quer dizer “User” e sim “Unix System Resources”.

/var : Diretório contém arquivos que são gravados com freqüência pelos aplicativos do sistema, como: e-mails, cache, spool de impressora.

Essa estrutura que mostrei acima, é considerada padrão. Encontrará a mesma se estiver utilizando a distribuição da Red Hat, SuSe ou o Ubuntu.

Duvidas? Voltarei a falar sobre o tema em breve.

Autor: Marcellino Junior
Fonte: http://marcellino.wordpress.com/

Compartilhando arquivos e pastas entre maquinas Linux com o NFS

Eu vejo em muito sites e artigo na internet, autores sempre falando sobre o compartilhamento entre maquinas Windows e Linux. Ironicamente, no mundo Linux é mais difícil você encontrar alguma informação que fale exclusivamente de compartilhamento entre máquinas Linux do que Windows x Linux. É como se todo mundo usasse o Linux apenas naquele computador velhinho do canto da sala e o colocassem em um ambiente totalmente Microsoft.

Enquanto o SAMBA é capaz de compartilhar arquivos entre Windows x Linux e Linux x Linux na mesma rede, o NFS é uma opção só para ligação entre máquinas Linux, porém, o considero muito mais prático e estável para esse serviço (você não pode deixar de estuda-lo, é um recurso muito importante e tenho certeza que irá precisar um dia .

Assim como o SAMBA, o NFS terá que ser habilitado manualmente. Algumas distribuições ja vem com ele instalado e as vezes, até com uma interface gráfica para sua configuração. Mas para eu me isentar de qualquer responsabilidade de escrever várias versões deste artigo para cada uma de suas diferentes “abordagens”, eu vou partir para o modo-texto (ou shell, se preferir), que será comum a todos.

No Debian/Ubuntu e seus derivados, o primeiro passo é instalar os pacotes necessários para iniciarmos a configuração da rede.Os pacotes são: nfs-kernel-server e nfs-common portmap.

Em outras distribuições, apenas “nfs”.

Para instalar utilize o seguinte comando:

sudo apt-get install nfs-kernel-server nfs-common portmap

É bastante pequeno, não demorará 1 minuto para ser baixado.

Configurando o servidor

O próximo passo é editar o arquivo “exports”, ele se encontra em:

/etc/exports

Farei o exemplo, utilizando meu editor favorito, o VI. No comando abaixo, substitua o editor VI por um de sua preferência.

sudo vi /etc/exports

Dentro do arquivo, adicione o endereço da pasta que deseja compartilhar e o IP da máquina que irá acessar o compartilhamento seguindo o modelo a seguir:

/home/usuario 192.168.0.100(rw,async)

Simples não?

Se desejar que toda a faixa de IP de sua rede acesse o compartilhamento, ao invés de 1 computador em particular, faça:

/home/marcellino 192.168.0.*(rw,async)

Descrevendo as opções

r = Read, permissão de leitura da pasta.

w = Write, estou dando permissão de escrita no compartilhamento.

E se deseja compartilhar como apenas leitura, use: “ro” no lugar de “rw”

Ja a opção “async” é muito útil em redes locais por que permite que o NFS transfira arquivos de forma “assíncrona”, sem precisar esperar pela resposta do cliente. Sem essa opção a taxa de transmissão em uma rede de 100MB/s fica em torno de 6/7 MB/s, e se ativada, vai para 11 MB/s. Fica limitada apenas à velocidade da rede e obviamente aos HDs do servidor e dos clientes.

Iniciando os serviços

Ja com as devidas alterações feitas no arquivo exports, digite o comando abaixo para fazer com que o arquivo anteriormente editado, seja lido pelo Kernel.

exportfs -a

e inicie os serviços NFS e Portmap com os comandos:

sudo /etc/init.d/portmap start
sudo /ect/init.d/nfs-kernel-server start

Configurando o Cliente

A parte de configuração na máquina cliente é extremamente simples, abra o terminal ou até mesmo graficamente e crie um diretório para ser usado para montarmos o compartilhamento. Por exemplo:

mkdir /home/marcellino/nomedocompartilhamento

e depois monte com o comando:

sudo mount -l nfs 192.168.0.616:/home/usuario /home/marcellino/nomedocompartilhamento

Explicando o procedimento passa-a-passo

mount = Comando usado para montar o compartilharmento.

IP = Espefique o IP do servidor que configurou anteriormente.

/home/usuario = Pasta que foi compartilhada no servidor.

/home/marcellino/compartilhamento = Pasta criada para receber a montagem do compartilhamento.

Na teoria, este tutorial consumiu muitas linhas para exemplificar o uso do NFS, mas a medida que o leitor pega a prática, a velocidade na qual é feita um compartilhamento é incrível. Eu mesmo me peguei inumeras vezes levantando um compartilhamento em questão de pouquíssimos minutos… Experimente!

Autor: Marcellino Junior
Fonte: http://marcellino.wordpress.com/

Remover vírus do Windows usando pendrive com Linux

Otimo artigo Kleber Povoação de como remover virus no windows apartir de um boot pelo pen drive com linux e antivirus.

Introdução

Na área da informática as vezes precisamos de um dinheiro extra, eu quase sempre, e normalmente o jeito mais rápido para mim é arrumando computadores. A maioria dos usuários domésticos como se sabe utiliza Windows e um dos problemas mais frequentes que eu tenho é com vírus. Muitos tem antivírus, mas não fazem update dele ou o desligam, afinal, de uma forma ou de outra, pegam vírus.

A maioria dos meus clientes domésticos utilizam banda larga, Windows XP, micros com USB e CD-ROM e não possuem uma rede doméstica.

A melhor alternativa custo/benefício para resolver este problema para mim foi procurar uma maneira de dar o boot no micro por um CD-ROM ou USB e passar um antivírus.

Optei pelo boot USB, pois poderia facilmente atualizar o antivírus no pendrive, é mais prático e a maioria dos computadores já conseguem dar o boot pelo USB.

Preparando o pendrive

Comprei um pendrive e optei pelo Linux para o boot. Instalei a distribuição Slax nele.

Site do Slax:

* http://www.slax.org

Como instalar Slax no pendrive:

* http://www.slacklife.com.br/article.php?sid=1540

Reinicie o micro pelo pendrive para terminar a configuração.

Agora precisamos instalar o antivírus no Slax em nosso pendrive. A maneira mais fácil no Slax de instalar algum software é utilizando módulos do Slax.

Segue explicação do próprio site do Slax sobre módulos:

“Software adicional para SLAX é distribuído na forma de módulos comprimidos. O uso é muito simples, apenas adicione seu módulo baixado no diretório /modules/ do CD para incluir ele permanentemente no SLAX ou use o comando “uselivemod” no SLAX para ativar o módulo “on the fly” quando o sistema já está ativo”.

Como antivírus optei pelo Clamav. Vamos instalar o modulo do Clamav no SLAX.

Baixei aqui o módulo do Clamav:

* http://www.slax.org/modules.php?category=security

Copiei para a pasta “modules” conforme dito acima e pronto.

Você pode reiniciar o micro novamente para verificar se está carregando automaticamente o módulo do clamav.

Quando acessei o SLAX ele montou automaticamente meu pendrive no diretório /mnt/sda1_removable.

Agora com SLAX e clamav funcionando, nos resta atualizar as definições de vírus e fazer as verificações no micro de algum usuário e ajustar algumas configurações do clamav, pois quando desligamos o sistema perdem-se algumas configurações.

Script e configurações

Para isso fiz um script bem simples. Você criará um diretório:

# mkdir /mnt/sda1_removable/scripts

Colocará o script dentro dele e os arquivos de configuração do clamav, que são dois: clamd.conf e freshclam.conf.

Agora segue o script e os dois arquivos de configuração que estou utilizando para serem colocados no diretório /mnt/sda1_removable/scripts:

clamav.sh

clear
echo Adicionando grupo e usuário clamav ao sistema…
groupadd clamav
useradd -g clamav -s /bin/false -c “Clam Antivírus” clamav

echo Ajustando arquivos de configuração…
cp *.conf /etc/clamav/
mkdir /var/lib/clamav
cp *.cvd /var/lib/clamav
touch /var/log/clam-update.log
chown -R clamav:clamav /var/log/clam-update.log /var/lib/clamav

echo “Você quer atualizar antivírus agora ? [S/N] “
read A
if [ $A = "S" -o $A = "s" ] ; then
echo Atualizando Clamav…
freshclam -l /var/log/clam-update.log
cp /var/lib/clamav/*.cvd $PWD
echo Arquivo de log de atualizado esta em /var/log/clam-update.log
fi

echo Para visualizar as partições montadas aperte ALT+F2 e para voltar aperte ALT+F1
cat /etc/mtab > /dev/tty2

echo “Se você tem e quer montar partição NTFS como leitura e gravação para remover vírus digite Sim aqui . Se responder não ela ficara como somente leitura[S/N] “
read NT
if [ $NT = "S" -o $NT = "s" ] ; then
echo Em qual dispositivo esta a partição NTFS ? ex: /dev/hda1
read DEV
umount $DEV
mkdir /ntfs
ntfs-3g $DEV /ntfs
echo A partição NTFS foi montado em /ntfs
fi

echo “Você quer passar o anti vírus agora ? [S/N] “
read B
if [ $B = "S" -o $B = "s" ] ; then
echo Digite a partir de qual diretório você quer procurar por vírus
read DIR
clamscan –bell -v –stdout –remove -r $DIR –exclude /var/lib/clamav
fi

umount /ntfs && rmdir /ntfs

echo Script feito por Kleber Povoacao e licenciado pelos termos da GPL versão 2

clamd.conf

# Comment or remove the line below.
#Example
LogFile /tmp/clamd.log
LocalSocket /tmp/clamd
FixStaleSocket
User clamav
ScanPE
ScanOLE2
ScanHTML
ScanArchive
ScanRAR
ArchiveMaxRecursion 0
ArchiveMaxFiles 0

freshclam.conf

# Comment or remove the line below.
#Example
DatabaseDirectory /var/lib/clamav
DatabaseOwner clamav

DNSDatabaseInfo current.cvd.clamav.net
DatabaseMirror db.br.clamav.net
DatabaseMirror database.clamav.net

MaxAttempts 1
Checks 12
# Proxy settings
# Default: disabled
#HTTPProxyServer myproxy.com
#HTTPProxyPort 1234
#HTTPProxyUsername myusername
#HTTPProxyPassword mypass

Considerações finais

Observações: Se for passar o antivírus em partição NTFS e ao utilizar o script você for montar como leitura e gravação a partição do WINDOWS, não utilize dentro do KDE, utilize no Fluxbox ou somente no terminal.

Utilizando o antivírus:

1. boot pelo pendrive
2. acessar o diretório onde está montado seu pendrive, ex.:
   # cd /mnt/sda1_removable/scripts
3. rodar o script:
   # sh clamav.sh

Pronto!!! Seu sistema com boot e antivírus para ser passado em qualquer micro. Você pode adicionar outros softwares no pendrive e torná-lo melhor ainda. Depende da sua imaginação.

Autor: Kleber Povoação
Fonte: http://www.vivaolinux.com.br/

DIFERENÇAS ENTRE VISIBILITY:HIDDEN E DISPLAY:NONE

De acordo com as especificações do W3C, Visibility:hidden e Display:none tem “aparentemente” a mesma função, “esconder” objetos em uma página, mas com uma única diferença, quando utilizamos visibility:hidden em uma div por exemplo, ela ficará oculta em nossa página, mas o espaço por ela ocupado ainda ficará alí na página, ao contrário de display:none, quando usado além de esconder o objeto, ele some com o espaço ocupado pela mesma também.

Ficou meio confuso? Vamos ver um exemplo:

Usaremos como exemplo o seguinte código CSS:

div {
    border:1px solid #000;
}
.visibility {
    visibility:hidden;
}
.display {
    display:none;
}

E utilizar-mos o seguinte HTML:

1 : Caracterizada como uma div normal

2 : Essa div utiliza visibility:hidden

3 : Caracterizada como uma div normal

4 : Essa div utiliza display:none

5 : Caracterizada como uma div normal

Agora, vejam um exemplo em funcionamento, se notarem, a div de nº 2, que utiliza visibility:hidden não aparece, mas seu espaço ocupado continua alí, e a div de nº 4, que utiliza display:none, também não aparece, e nem seu espaço ocupado. Vocês sabiam disso? Eu não, acabei descobrindo isso aqui.

Autor: Pedro Rogério
Fonte: http://www.pinceladasdaweb.com.br/

Integrando o nautilus a rede Linux

Em virtude do artigo anterior falando sobre integrando o nautilus a redes Windows tive a obrigação de fazer o mesmo para nosso Linux, qual a razão ? O artigo anterior parece ter induzido alguns leitores iniciantes a achar que o Linux usa a mesma solução de redes windows para inclusive integrar linux com linux, que é um absurdo. Vamos corrigir isso e criar um artigo à altura sobre integração do Nautilus a redes Linux. Primeiramente, o artigo a seguir não se aplica somente a Linux, mas qualquer sistema operacional que tenha um programa chamado openssh, cuja disponibilidade é imensa em praticamente todas as plataformas incluindo até mesmo o windows.

1) Instale o ‘openssh-client’ no seu computador, ou se preferir que seu micro seja um servidor, isto é, também possa ser acessado por outros ou que sejam abertas sessões de terminal nele instale também o ‘openssh-server’ :

sudo apt-get install openssh-client
sudo apt-get install openssh-server (somente se voce deseja tornar-se também um servidor)

Observação : Os dois pacotes acima são meta-pacotes, isto é, não são seus nomes verdadeiros apenas apontam para os nomes de pacotes correlatos.

2) Carregue o nautilus, dê um CTRL+L para abrir a barra de endereços (no artigo anterior mostrei como deixar essa barra de endereços sempre aberta, isso se aplica apenas se o CTRL+L lhe incomoda para abrir endereços da rede) e execute :

opção 1) ssh://SERVIDOR/pasta/para/ser/acessada
opção 2) ssh://beltrano@SERVIDOR/pasta/para/ser/acessada

Na opção 1 serão requeridas as credenciais de quem já está logado no GNOME, isto é, se seu usuário de sessão é FULANO então uma conta FULANO deverá ter sido criada em SERVIDOR, a senha a ser solicitada deverá ser igual a que foi criada em SERVIDOR.

Na opção 2 serão requeridas as credenciais de beltrano que de antemão também foi cadastrada em SERVIDOR e a senha que será solicitada após deverá corresponder a mesma. Como foi explicado no artigo anterior os outros campos do formulário de autenticação são :

“Lembrar a senha” para esta sessão refere-se a voce não ter que digitar a senha novamente quando o acesso for ao mesmo servidor, mas isso só dura enquanto seu login estiver ativo naquela sessão do Ubuntu.

“Salvar a senha no chaveiro” é um recurso do GNOME onde o nautilus pergunta ao chaveiro do GNOME a senha e este chaveiro fornece-a. O acesso ao chaveiro também requer uma senha mestre. Se voce ainda está aprendendo a usar o GNOME é melhor não se concentrar nisso por enquanto.

Pronto ! É muito mais fácil usar assim e menos complicado do que usar redes windows.

Eu não disse nada a respeito das qualidades do openssh porque são muitas, criptografia é uma delas, além disso é muito melhor e seguro transferir arquivos grandes (>2 GB) . Para quem usa Windows e precisa transferir arquivos de micros com SSH-SERVER instalado poderá usar o Putty que é um cliente ssh para Windows (tem para Linux também), ele é muito bom para abrir sessões de terminal no windows, o único problema para os usuários Windows é uso da linha de comando para transferir arquivos, mas anime-se! tem alguns clientes de FTP para Windows que também já contemplam o protocolo ssh, o que torna essa operação mais visual.

É interessante que o nautilus além de permitir permitir operações de I/O (input/out) básicas como copiar/renomear/apagar, poderá também abrir e salvar este ou aquele arquivo sem a necessidade de copia-lo antes para seu disco. Isso não é nenhuma exclusividade do GNOME, com a suite KDE faz-se a mesma coisa, a única coisa que muda é ao invés de “ssh://” deve-se usar “fish://” na url do konqueror.

3) Há muitos modos diferentes de compartilhar arquivos no linux, usando ssh é apenas um deles. O motivo de eu preferir o ssh é porque além de compartilhar, o ssh é um leque enorme de opções onde além de transferir arquivos e abrir sessões remotas em outros micros são apenas algumas das possibilidades, pode-se por exemplo utiliza-lo sob outros protocolos para acrescentar criptografia é o caso de transformar o próprio FTP em SFTP.

 

Autor: hamacker
Fonte: http://hamacker.wordpress.com/

 

Integrando o nautilus a rede Windows

Para mim isso é uma tarefa simples e fácil, no entanto, volta e meia em listas de discussão e forums alguém faz essa pergunta : “Como acessar meus compartilhamentos de rede Windows a partir do Nautilus ?”. É muito simples, vamos a um passo-a-passo :

1) Primeiramente tenha certeza de que tem o samba-clients e smbfs instalado em seu sistema :

sudo apt-get install -y smbfs [smbclient]

Coloquei [smbclient] entre colchetes porque é opcional, mas eu sempre instalo-o porque muitas vezes também monto dispositivos na rede a partir da linha de comando e comandos como smbtar, smbmount,smbclient,… estão disponiveis somente no pacote smbclient.

2) A partir daí, voce já poderá acessar arquivos compartilhados na rede, basta carregar o nautilus e após isso dar um CTRL+L e digitar na barra de endereços do Nautilus :

opção 1) smb://SERVIDOR/compartilhamento
opção 2) smb://fulano[:senha]@SERVIDOR/compartilhamento

Obviamente a segunda opção usa fulano[:senha] e é um acesso direto sem necessitar digitar credenciais, porém não recomendo o seu uso, visto que sua senha estaria disponivel na URL do Nautilus e todo mundo que passasse perto do seu computador poderia ve-la, algumas versões posteriores do Nautilus escondem fulano:senha após o enter, mas mesmo assim eu não arriscaria. Usando a primeira opção, quando voce teclar ENTER então uma nova janela do Nautilus solicitará de voce as seguintes credenciais :

Nome de usuário : O Nautilus sugere o mesmo login que voce já está usando na sua sessão, no entanto, voce poderá troca-la.

Dominio : Em “dominio” voce digita o nome do dominio de rede, assim sua senha será autenticada lá, se voce não possui um PDC (Primary Domain Controller) então digite o seu grupo de rede windows.

Senha: Obviamente voce digita a senha. Voce vai perceber que há também duas opções que poderão ser ligadas “Lembrar a senha para esta senhão” e “Salvar a senha no chaveiro” :

“Lembrar a senha” para esta sessão refere-se a voce não ter que digitar a senha novamente quando o acesso for ao mesmo servidor, mas isso só dura enquanto seu login estiver ativo naquela sessão do Ubuntu.

“Salvar a senha no chaveiro” é um recurso do GNOME onde o nautilus pergunta ao chaveiro do GNOME a senha e este chaveiro fornece-a. O acesso ao chaveiro também requer uma senha mestre. Se voce ainda está aprendendo a usar o GNOME é melhor não se concentrar nisso por enquanto.

Clique em conectar e terá acesso a todo o compartilhamento.

Seria sábio da sua parte usar o favoritos, ops ! eu quero dizer “Marcadores”. Vá em Marcadores e em seguida escolha adicionar “Marcadores”. Os marcadores são uteis porque podem ser utilizados nas caixas de dialogo (abrir/salvar) dos aplicativos do GNOME, por exemplo, se voce tiver um marcador apontando para um local de rede, o BrOffice será capaz de abri-lo sem necessitar de mapeamento prévio. É bom lembrar que marcadores só funcionam para pastas, não adianta usa-lo para guardar o nome do compartilhamento ou acesso direto a um arquivo.

3) Vamos usar gconf-editor para ajustar algumas variáveis do Nautilus, dê um ALT+F2 e execute “gconf-editor”. Então vá até a chave “network_icon_visible” seguindo a sequencia /apps->nautilus->desktop e voce deverá ligar a chave “network_icon_visible“, fazendo isso voce estará ativando um ícone chamado de “Servidores de Rede” na area de desktop (no Windows isso seria chamado de “Ambiente de Rede”).

Apenas como comentário, eu também gosto de ligar as outras opções de ícone : “computer_icon_visible“, “home_icon_visible” e “trash_icon_visible“, estou mais familiarizado assim do que ir até o menu Locais, mas gosto é gosto e cada um tem o seu.

Enfim, depois de ter ligado a chave “network_icon_visible“, voce poderá navegar nas máquinas Windows que compartilham algo. O ícone voce já sabe se encontra na sua area de desktop.

4) Para deixar o dominio/grupo sempre configurado é util deixar ligado no gconf-editor essa chave aqui :

/system->smb

Digite em “workgroup” o nome do dominio/grupo de sua rede Windows. Dessa forma, ao solicitar as credenciais de login, o nautilus já trará preenchido o campo Dominio.

5) Se voce é contra o CTRL+L para acessar barra de endereços do nautilus, então ainda usando o gconf-editor acesse a seguinte chave :

/apps->nautilus->preferences e ligar a opção “always_use_location_entry“, com isso voce pode dar adeus ao CTRL+L.

Algumas versões do GNOME e distribuições diferentes acrescentam essa opção nas Preferencias do Nautilus, porém no Ubuntu essa opção só existe mesmo no gconf-editor.

 

Autor: hamacker
Fonte: http://hamacker.wordpress.com/

INSTALANDO O APACHE, PHP E O MYSQL no Pen Drive

Preparando o ambiente de desenvolvimento em PHP
Existem varias maneiras de se construir um ambiente para desenvolvimento dentre os quais os mais usados são:

• O processo de Instalação e Configuração do Apache, PHP e MySQL.
• O uso de uma ferramenta portável que não precisa de instalação que se chama WOS, ferramenta essa que será o foco deste post.

Se quiser ter instalado em sua máquina todo ambiente, que no Windows chamamos de (WAMP) acrônimo que significa (Windows – Apache – Mysql – PHP), são necessárias varias etapas de instalação e configuração que demandam um conhecimento mais aprofundado e um tempo que nos dias de hoje é desnecessário em minha opinião, partindo do principio que existem ferramentas para facilitar o trabalho e exatamente nisso que focaremos neste estudo. Agora se seu negócio é subir um servidor de internet em sua casa sugiro que estude Linux, pois até a Microsoft usa. Bem antes de explicar sobre o WOS vou lhe dar um norte se quiser instalar pacote por pacote no braço, se quiser tentar que a força esteja com você.

Etapas:

• Instale o Apache.
• Instale o PHP.
• Existe uma configuração a se fazer no apache para o mesmo enxergar o php edite o arquivo httpd. conf e adicione os módulos do php.
• Instale o MySQL

Muito trabalho não acha? Se quiser se aprofundar mais no assunto existem muitos artigos na internet que explicam como subir um ambiente de desenvolvimento dessa forma. Agora irei lhes apresentar uma ferramenta que se chama WOS, ela simula todo ambiente de desenvolvimento e o melhor de tudo, não precisamos instalar nada! É totalmente portável e grátis. Você pode, por exemplo, rodar dentro de um Pen Drive, na verdade ele foi desenvolvido com esse propósito, de se rodar aplicações no próprio Pen.

Vamos ao que interessa! Em primeiro lugar você deve baixar o WOS. Feito isso descompacte ele em algum lugar no seu equipamento que fique de fácil acesso, pois iremos utilizá-lo com muita freqüência (para descompactar o arquivo precisará do winzip). Abra a pasta onde você descompactou o arquivo, nela terá um ícone semelhante a esse:

De um duplo clique no ícone start.exe para carregar o WOS, se tudo até aqui correu bem o aplicativo iniciará e você verá a tela do aplicativo que é essa:

O indicador Apache e Mysql is Running indicam que os serviços carregaram sem erros, se assim não fosse estariam escritos em vermelho e não funcionariam adequadamente, se isso acontecer não se desespere! É só fechar e abrir o programa novamente! Tudo carregado a contento o WOS se encarrega de abrir uma instancia do seu navegador padrão (sem fazer apologias mais o Firefox é o melhor em minha opinião, o Pedro já prefere o Opera, agora lhes digo algo NÃO USE O IE, use-o somente para testar suas paginas), abrira automaticamente a pagina http://localhost/start/index.php que é a pagina principal onde temos alguns controles básicos do nosso servidor. A página que ele abre é semelhante a essa:

Onde PhpMyAdmin é uma ferramenta escrita em php (é claro) para administrar o Banco de dados MySQL, nela você pode criar bancos, tabelas, inserir registros, enfim toda parte de eventos de administração do banco de dados MySQL. O restante das opções é apenas de informações sobre a ferramenta. Já temos nosso Web Server rodando em nossa maquina, agora vamos fazer um teste com o php.

Importante: os arquivos devem ser criados em uma pasta dentro do servidor WOS que se chama WWW como na imagem a baixo:

Para nosso primeiro exemplo vamos entrar na pasta WWW e criar uma pasta com o nome exe_1 como na imagem a baixo:

Quanto ao Editor (iremos precisar de um editor para fazer nossas páginas não é mesmo?), sinta-se a vontade para utilizar o que você achar mais conveniente. Porém para este guia irei utilizar o PsPad (gratuito e não precisa instalar). Vamos apenas fazer um teste para saber se nosso php esta funcionando corretamente, pois só iremos programar no próximo artigo (só para fazer suspense, portanto aguardem).

Abra um novo arquivo e digite como está na imagem abaixo:

E salve como index.php na pasta www\exe_1 que nós havíamos criado anteriormente:

Vamos testar? Abram o browser e digitem: http://localhost/exe_1/. Aqui é importante salientar que o endereço de nossas páginas não começará com www, e sim http://localhost, pois estamos rodando aplicações localmente, isso é muito importante, é só colocar no seu browser http://localhost mais o local onde está localizado o arquivo, ou seja, localhost é a pasta www do nosso servidor.

Se tudo correu bem, você verá uma tela semelhante a essa:

Nosso Primeiro comando de php foi o phpinfo( ), ele é responsável em exibir todas as configurações do php e a sua versão. Se tudo estiver funcionando corretamente, você verá todos os seus parâmetros. Nesse post nós aprendemos como iniciar um ambiente de desenvolvimento, no próximo post iniciaremos a programação em php.

Autor: Eduardo Siqueira

Fonte: http://www.pinceladasdaweb.com.br/

O que são web standards?

Web standards são padrões para a construção de sites determinados pelo W3C, órgão dirigido pelo próprio criador da web, Tim Berners Lee, e apoiado pelas maiores empresas de tecnologia da informação e comunicação do mundo, incluindo IBM, Microsoft, Google, HP, America Online, Apple, Adobe-Macromedia, Sun Microsystem, Mozilla Foundation e outras.

Os padrões determinam que o HTML seja usado com a finalidade para a qual foi criado, ou seja, documentos que utilizem a linguagem de marcação para hipertexto. Isso significa que o documento HTML só deve ter conteúdo, e não apresentação visual. Um título deve ser marcado com a tag de título [h1]. Uma sigla deve levar a tag [acronym]. Um parágrafo deve ser escrito entre as tags [p], e assim por diante. As tabelas, que são amplamente utilizadas para estruturar os sites, só devem ser usadas para aquilo que foram criadas: exibir dados tabulados.

Isso quer dizer que a web vai se tornar somente páginas de texto preto em um fundo branco com links azuis sublinhados? Não. A apresentação visual será toda formatada através de CSS. Dessa forma, o usuário que acessar o conteúdo através de um computador comum conectado à internet poderá ter acesso a um site visualmente agradável que segue os padrões internacionais de qualidade.

Veja as principais vantagens de se adotar essa metodologia, que deveria ser uma obrigação profissional de todo desenvolvedor e toda produtora web.

Sites mais baratos
O uso de web standards permite que as fases de design e programação ocorram em paralelo, reduzindo o tempo de produção. A manutenção do projeto também fica mais simples. Não é preciso comprar licenças de softwares para estruturar os documentos HTML e CSS. O site fica mais leve, consumindo menos banda do servidor. Tudo isso resulta em um fator muito importante: redução de custos.

Melhor visibilidade em buscadores
Quando um HTML é estruturado da maneira correta, com as tags sendo utilizadas para as funções que foram criadas, a indexação em mecanismos de busca inteligentes, como o Google, é muito mais bem realizada. Por exemplo, o Google sabe que algo escrito entre tags [h1] é um título importante e têm relevância maior em uma busca com determinada palavra-chave. Isso não acontece se o título fosse marcado com [font size=”5″ color=”#FF6600″][strong].

Sites mais velozes
Como o arquivo de apresentação visual só precisa ser baixado uma vez e o HTML é estruturado da forma correta, as páginas ficam muito mais leves, carregando rapidamente e permitindo que o usuário tenha uma experiência de navegação otimizada. Além disso, economiza-se muito (em alguns casos, até 75%) em banda que antes era desperdiçada para transportar códigos inúteis.

Acessibilidade
Usar web standards por si só já é um grande passo no quesito acessibilidade. Não será necessário criar versões específicas de um projeto para portadores de deficiência. Além disso, o projeto poderá ser visto em qualquer navegador, com algumas diferenças de renderização. O dispositivo também se torna indiferente. Um site que segue os padrões pode ser acessado pelo computador, PDA, telefone celular, leitores de tela e qualquer outro tipo de dispositivo que exista ou venha a ser criado para navegar na web como ela é estruturada hoje.

Redesign otimizado
Como as informações de apresentação ficam separadas das de conteúdo e ficam todas concentradas em um só arquivo CSS, é muito mais fácil fazer qualquer alteração no design. Desde mudar a cor dos títulos até trocar o posicionamento de áreas de todo o site.

Continuidade
A metodologia permite que qualquer desenvolvedor possa dar continuidade ou modificar um projeto iniciado por outra pessoa. Evita-se que apenas um membro da equipe domine o desenvolvimento, deixando o projeto mais flexível.

Fonte: http://fatorw.com/

Usabilidade, Faça jus ao seu projeto

Salve, salve!!

Peço permissão aos moderadores para falar um pouco sobre usabilidade na web. Nosso maior intuito neste ambiente é compartilhar idéias, conhecimentos, experiências entre outros… contudo vaí aí algumas informações que podem ser úteis para nós desenvolvedores (seja ele iniciante, intermediário ou avançado). O objetivo é mudar comportamentos e fazer com que a usabilidade faça parte de seus futuros websites.
Como webdesign, quero poder oferecer um melhor serviço aos usuários, por isso espero que você também se sinta pronto para agir em seu projeto de design. As maneiras que podem ser tomadas para tornar a vida dos usuários mais felizes são várias. Você poderá utilizar métodos e técnicas de usabilidade, pois muitos são extremamente fáceis de aprender. Além de obter melhorias no seu site estará contribuindo para que os usuários voltem a visitá-lo.
Infelizmente a maioria dos webdesigners ignoram totalmente a usabilidade e criam designs para seu bel prazer ( ou pior, para o prazer do chefe) ao invés de satisfazer as necessidades do usuário.

Que vença a simplicidade!!

POR QUE A USABILIDADE NA WEB?

A usabilidade assumiu uma importância muito maior na economia da Internet.
No desenvolvimento de produto físico tradicional, os clientes só experimentavam a usabilidade quando já tinham comprado e pago. Digamos, por exemplo, que você compre um vídeo cassete e descubra que é difícil acertar a hora, além de não conseguir como programar a gravação de seus programas favoritos. Azar o seu – o fabricante ri enquanto sua conta bancária cresce.

A web não funciona assim. Ela inverte esse quadro. Atualmente, os usuários experimentam a usabilidade de um site antes de se comprometeram a usá-lo e antes de gastarem dinheiro em possíveis aquisições. Vejam como é simples a equação:

:: No projeto de produto e de software, os clientes pagam primeiro e experimentam a usabilidade depois.
:: Na web, os usuários experimentam a usabilidade primeiro e pagam depois.

Fica bem claro por que a usabilidade é mais importante para o webdesign.

CSS E A USABILIDADE

É impossível falar de usabilidade e não falar de CSS. As folhas de estilo em cascata são apenas uma das maiores esperanças de recapturar o ideal da web de separar apresentação e conteúdo. A web é o máximo em termos de sistema multiplataformas e seu conteúdo será apresentado em uma variedade tão grande de dispositivos que as paginas devem especificar o significado das informações e deixar os detalhes da apresentação a uma intercalação (ou “cascata”) de folhas de estilo especificadas pelo site e às preferências do usuário.

Em suma, CSS e usabilidade resulta em simplicidade, a qual deve ser a meta do design da página. Com exceção de nós (desenvolvedores) os usuários raramente encontram-se em um site para desfrutar do design; em vez disso, preferem concentrar sua atenção no conteúdo. É também importante garantir que as páginas sejam perfeitamente visualizadas em uma série de plataformas e que possam ser acessados por pessoas que usam tecnologia antiga.
Garanta que todas as páginas funcionem em browsers e versões de dois anos de idade de todos os plug-ins e outros softwares.

NO FRAMES (ou não use quadros)

A primeira recomendação com respeito a quadros é:
Quadros: diga não.
As pessoas que realmente sabem o que estão fazendo podem às vezes usar quadros para obter um bom efeito, embora até mesmo os designers experientes sejam aconselhados a usar quadros o mínimo possível.
Se insistir no uso de quadros apesar de meu conselho para que faça o oposto, pelo menos forneça uma versão sem quadros para os vários usuários que preferem evitar quadros. Em particular, o conteúdo alternativo pode ser fornecido em uma seção <NOFRAMES> que será exibida aos usuários que desativaram as quadros ou que usam um browser que não ofereça um suporte a quadros.
A versão 2.0 do Netscape foi o primeiro browser a oferecer suporte aos quadros, mas o fez de uma forma terrível, introduzindo um dos piores problemas de usabilidade encontrado na web até agora: o botão Voltar no browser simplesmente não funcionava com os sites com quadros.

Portanto, quebrar o botão Voltar é nada mais nada menos que uma catástrofe em termos de usabilidade.
Felizmente, quase ninguém mais usa o Netscape 2.0; foi um verdadeiro desastre.

O DESIGN DO CONTEÚDO: Mantenha os textos breves

Uma pesquisa mostrou que ler da tela do computador é cerca de 25% mais lento do que ler do papel. Mesmo os usuários que desconhecem essas pesquisas sobre fatores humanos geralmente dizem que sentem desconforto ao lerem texto on-line. Como resultado as pessoas não querem ler muito texto das telas de computador. Portanto, deve-se escrever 50% menos texto – não apenas 25% menos – pois não se trata apenas de velocidade de leitura, mas de uma questão de conforto. Sabemos também que os usuários não gostam de rolar a tela: mas uma razão para manter a brevidade das páginas.
Já que é tão custoso ler texto em telas do computador e já que a experiência on-line parece fomentar uma certa dose de impaciência, os usuários tendem a não ler totalmente fluxos de texto. Invés disso, passam os olhos pelo texto e escolhem palavras-chave, sentenças e parágrafos de interesse enquanto pulam as partes de texto que menos lhe interessam.

Com relação aos títulos de página, em HTML, cada página tem um título especificado na seção de cabeçalho. É importante especificar bons títulos de página, pois os títulos são muitas vezes usados como a principal referencia às páginas. Os títulos de páginas também são usados em muitos menus de navegação como listas de Boockmarks e listas de históricos.

Concluindo, o conteúdo é o foco de atenção do usuário da web. É a razão dos usuários se conectarem e é a primeira coisa que olham quando carregam uma página. O conteúdo de qualidade é um dos dois determinantes mais importantes da usabilidade da web o outro é se os usuários podem achar a página que desejam.

ANIMAÇÃO

As imagens em movimento têm um efeito indiscutível na visão periférica humana. Alguns usuários dizem que acham as animações legais ou indicam que houve muito trabalho de design de site. As animações podem, portanto, ter uma função semelhante às colunas de mármore nos bancos: demonstrar visivelmente o status e a afluência. No entanto, a maioria dos usuários diz que ficam irritados com as animações. Em particular, quase todos os usuários detestam textos em movimento e marquees.
Segundo Jakob Nielsen, a animação é boa para sete finalidades, são elas:
:: Mostrar continuidade nas transições
:: Indicar dimensionalidade nas transições
:: Ilustrar a mudança no tempo
:: Multiplexar o monitor
:: Enriquecer as apresentações gráficas
:: Visualizar estruturas tridimensionais
:: Chamar atenção.

No caso de “chamar atenção” o texto deve ser desenhado por uma animação não-repetível (por exemplo, um texto que desliza da direita para a esquerda, aumentando a partir do primeiro caractere ou crescendo suavemente) e nunca por uma animação continua, pois é muito mais difícil ler texto em movimento do que texto estático. O usuário deve ser atraído ao texto novo pela animação inicial e depois deve se deixá-lo em paz para ler o texto sem outras distrações.

Vá com calma com as animações em seu projeto, pois o feitiço da animação virar contra o feiticeiro.

A WebTV

O futuro está ai e não podemos esquecer disso. A web provocou a introdução de um dos primeiros aparelhos de informação na forma da WebTV em 1996. Antes, a WebTV não era um grande produto sendo de certa forma uma decepção em termos de venda. Na verdade, a WebTV é um produto irado em termos de usabilidade e design. Nos dias atuais com a chagada das telonas em plasma pode se dizer que a qualidade está cada vez mais agradável, e ficar sentado interagindo com a Internet é mais empolgante.

Ao criar para a WebTV para que respeitem os usuários é preciso seguir as seguintes diretrizes:
:: Não utilizar imagens grandes (mais de 544 pixels de largura ou 376 pixels de altura) a menos que ainda funcionem após o redimensionamento automático da WebTV para a área de viso disponível;
:: Reserve o uso de imagemaps para os casos absolutamente necessários;
:: Não inclua texto nas imagens pois os caracteres serão de difícil leitura na tela;
:: Não use um layout com várias colunas, se seu design exigir colunas, use no máximo duas colunas e garanta que funcionem em uma tela de 544 pixels de largura;
:: Divida as informações em um espaço de hipertexto rico com um número maior de nós menores;
:: Se possível faça com que cada unidade seja suficientemente pequena para que caiba em uma única tela da WebTV a fim de eliminar a rolagem;
:: Brevidade: escreva menos texto.

ACESSIBILIDADE PARA USUÁRIOS PORTADORES DE DEFICIÊNCIA

A legislação americana para portadores de deficiências e as leis e regulamentações semelhantes em outros paises muitas vezes exigem acesso igual a sistemas de computadores para os usuários portadores de deficiências. Em particular, haverá freqüentemente uma obrigação legal para facilitar o uso da intranet e Internet por funcionários e usuários deficientes que talvez não sejam capazes de realizar suas tarefas caso não possam acessar os websites da empresa.

Tornar a web mais acessível a usuários com varias deficiências resume-se, até certo ponto, a usar o HTML da forma pretendida: para codificar significado em vez de aparência. Desde que a página seja codificada para o significado, é possível que os browsers alternativos apresentem esse significado de formas otimizadas às capacidades de usuários individuais e, assim facilitem o uso da web por usuários deficientes.

Deficiências visuais
Os problemas de acessibilidade mais sérios, dado o atual estado da web, relacionam-se a usuários cegos e usuários com outras deficiências visuais, posto que a maioria das paginas da web é altamente visual.
Para aumentar a acessibilidade, garanta sempre um auto contraste entre as cores de primeiro e segundo plano e evite padrões de fundo confusos que interfiram na leitura. Qualquer coisa que reduza a legibilidade de seus textos é suficientemente irritante para os usuários com visão perfeita que definitivamente não gostam de ser retardados quando estão na web, mas fundos com texturas ou cores sutis podem ser a gota d´agua que faz com que sua página fique abaixo do limite de legibilidade para um usuário com visão parcial.

Para os desenvolvedores é importante lembrar que, para facilitar os usuários cegos ao passar os olhos no conteúdo, é recomendável enfatizar a estrutura da página através de marcações adequadas de HTML: use <H1> para o cabeçalho de nível superior, <H2> para as principais partes das informações dentro de <H1>, e <H3> e níveis inferiores para divisões ainda mais sutis de informação.

Assim, o usuário cego pode ter uma panorâmica da estrutura de uma página quando <H1> e <H2> forem lidos em voz alta e pode rapidamente pular uma seção desinteressante ao instruir uma leitura de tela a pular para o próximo cabeçalho de nível inferior.

Alem de tornar o texto legível, você também deve oferecer um método alternativo para “exibir” as imagens a pessoas vê-las. A principal solução a esse problema a essa altura é usar o atributo ALT.
Os usuários que não podem ver a foto verão ou ouvirão o texto alternativo “Nome da foto”.

Deficiências auditivas
É rara a situação em que o som é necessário para a compreensão; na maioria das vezes os efeitos sonoros na web são gratuitos – um dos poucos benefícios de design ruim, creio. A usabilidade de um site quase sempre continua a mesma quando o som é desativado, mas com a tendência crescente da multimídia, esse não continuara sendo o caso.

Independente da gratuidade do som ou de sua exigência pela multimídia, crie seu site tendo em mente um público com deficiências auditivas.

Deficiências de fala
No momento, não importa se o usuário da web é capaz de falar já que toda a entrada do computador é feita com um mouse e um teclado. É provável que as várias formas de interfaces com o usuário ativadas por voz fiquem mais populares no futuro para casos em que o uso do teclado seja incomodo ou apenas para oferecer suporte a usuários que prefiram falar os comando em vez de digitá-los.

Será muito mais problemático quando passarmos para interfaces nas quais a fala é a principal ou a única modalidade de entrada. Espero que a maioria dos sistemas de bate-papo logo se torne baseada na fala, já que esta é a forma natural de conversa para a maioria das pessoas.

Qualquer sistema de bate-papo que dependa da fala deve manter a possibilidade de participação de usuários não-falantes através de texto digitado.

Deficiências motoras
Muitos usuários têm dificuldade com movimentos detalhados do mouse e pode também ter problemas em pressionar várias teclas simultaneamente. A maioria dessas questões deve ser tratada por um melhor design de bowser e não deve preocupar os designers de conteúdo, exceto no que tange ao conselho de não criar imagesmaps que exijam o posicionamento extremamente preciso do mouse. Imagine que você tenha de deslocar seu mouse com os pés: leva muito tempo para chegar a um alvo pequeno.

Quaisquer applets que usem dispositivos de interação além do HTML padrão devem ser implementados a fim de permitir a operação sem o mouse. Esses recursos são incluídos como padrão tanto no Java quanto no ActiveX; portanto, é uma mera questão de implementar o código corretamente de acordo com as diretrizes oficiais da Sun Microsistems, Microsoft e outros fornecedores de ferramentas de software.

Deficiências cognitivas
Nos primeiros anos, a web era acessada era apenas por pessoas apenas muito inteligentes que eram pioneiras na tecnologia avançada. Mas, com a crescente popularidade da web, haverá mais usuários medianos e também usuários de inteligência abaixo da média. Para satisfazer esses usuários, será importante aumentar a usabilidade e garantir que o conteúdo seja compreensível em nível de leitura primária.

Uma forma simples de verificar muitos problemas de acessibilidade é acessar seu website em um browser apenas de texto como o Lynx. Se o site parecer bom e funcionar bem nesse browser, provavelmente será razoavelmente acessível para muitos usuários com deficiências.

Por último seria melhor realizar testes de usabilidade com uma série de usuários com várias deficiências, mas já que há tantos tipos diferentes de deficiências para atender, esse não é um conselho muito pragmático, exceto no caso de sites que atendam especificamente a usuários deficientes.

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

SITES RELACIONADOS

Português
Usability
Usabilidade.com
Usabilidade Br
Webinsider >> Usabilidade
Usabilidoido
Blog de Usabilidade
Usabilidade Net
Fator W
Atípico
FechaTAG
Felipe Memória
Alexandre Sadi
Rodrigo Muniz

Inglês
Useit – Jakob Nielsen
Asktog
UsableWeb
Usability first

LIVROS

Português

Usabilidade na Web
Mais informações e onde comprar

Não me faça pensar
Mais informações e onde comprar

Homepage: Usabilidade: 50 Websites Desconstruídos
Mais informações e onde comprar

Projetando Websites
Mais informações e onde comprar

Design para Quem Não é Designer
Mais informações e onde comprar

Design e avaliação de interfaces humano-computador
Mais informações

Design para a Internet: Projetando a Experiência Perfeita
Mais informações e onde comprar

250 Segredos para Web Designers
Mais informações e onde comprar

Inglês
Usability Engineering (The Morgan Kaufmann Series in Interactive Technologies)
Mais informações e onde comprar

Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests
Mais informações e onde comprar

“Lembre-se dos usuários ao projetar Websites“

Texto original: http://forum.ievolution.com.br

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

Acessando máquinas Windows a partir do Linux na sua rede

O smbclient serve para verificar os compartilhamentos:

# smbclient -L máquina -U guest

Agora é só montar:

# mount -t smbfs -o username=usuário,password=senha //máquina/compartilhamento /pontodemontagem

Não esqueça de criar uma pasta como ponto de montagem que pode ser assim:

# mkdir /mnt/nome_da_máquina

E assim você já pode acessar seus arquivos bem rápido!

Fonte: http://fenixneo.blogspot.com/

Acesso Remoto Seguro com Hamachi

Acesso Remoto Seguro com Hamachi

Buenas galera! Há algum tempinho, venho utilizando o hamachi para
realizar conexões entre maquinas de amigos e a minha criando redes
virtuais privativas de uma maneira muito eficiente, hoje o TRex
me mandou um link muito legal sobre a utilização do hamachi e vnc.

Vamos ao que interessa…

O que é o hamachi? É um zero-conf cliente de VPN tanto para M$
Windows como para LiNuX. Ele faz com que você crie redes privativas
que podem ser acessadas por qualquer membro que tenha um cliente
hamachi instalado. Ele faz isto criando túneis IP seguros liberando
o acesso direto sem necessidade de configurar NAT e etc
(muito bom para pessoal que tem adsl).

1. Instalando o Hamachi

1a) O Módulo “tun”
Esta parte da instalação do hamachi precisamos habilitar o tunelamento
de IP no seu kernel, para isso usamos o seguinte comando:

#modprobe tun

Então abra o arquivo /etc/modules e adicione tun na lista de modulos:

$sudo gedit /etc/modules

Se você está utilizando a versão standard do kernel do Ubuntu, isso
provavelmente será tudo que você terá que fazer. Já se você compila
o seu próprio kernel, terá que recompilar e adicionar o suoprte para
tunelamento IP. IMPORTANTE – Faça isso somente se você receber um
erro após o modprobe.

1b) INstalando o Hamachi propriamente dito:

Vamos lá agora no hamachi, mas primeiro nós precisamos ter certeza que
um túnel válido foi criado no /dev. Para isto faça:

#ls /dev/net/tun

Se você receber como resposta um erro “No such File or Directory”, você
precisa criar um novo nodo:

#mkdir /dev/net
#mknod /dev/net/tun c 10 200

Sendo assim temos já um nodo Túnel IP válido, vamos ao hamachi novamente.

Faça o download do software em http://www.hamachi.cc/download

Entre no diretório onde você baixou o arquivo e instale:

#tar xzvf hamachi-0.9.9.9-x.tar.gz
#cd hamachi-0.9.9.9-x

#install Hamachi
#make install
#tuncfg

Pronto!!! hamachi instalado!

1c) Setanto usuário e permissões

Por segurança, iremos configurar as permissões do Hamachi para que ele
seja iniciado somente por usuários pertencentes ao grupo “hamachi”

a)Criar o grupo hamachi
#groupadd hamachi

b) Adicionar seu usuário no grupo
#gpasswd -a user hamachi

c)Adicionar root no grupo
#gpasswd -a root hamachi

d)Setar érmissões do socket
#chmod 760 /var/run/tuncfg.sock

e)Finalmente, mude o grupo do arquivo
#chgrp hamachi /var/run/tuncfg.sock

Agora que as permissões estão ok, vamos à configuração.

1d) Configurando o hamachi como serviço

Seguindo esta parte, se você quiser que o hamachi seja iniciado como
serviço.

a) Configuração básica

Fazendo uma configuração inicial:

#hamachi-init -c /etc/hamachi

O resultado deve ser algo parecido com isto:
Initializing Hamachi configuration (/etc/hamachi). Please wait ..
generating 2048-bit RSA keypair .. ok
making /etc/hamachi directory .. ok
saving /etc/hamachi/client.pub .. ok
saving /etc/hamachi/client.pri .. ok
saving /etc/hamachi/state .. ok
Authentication information has been created. Hamachi can now be started with
‘hamachi start’ command and then brought online with ‘hamachi login’.

Vamos inicializar o hamachi

#hamachi -c /etc/hamachi start

Agora que estamos com hamachi inicializado vamos setar o seu apelido:
$sudo hamachi -c /etc/hamachi set-nick “SeuApelidoAqui”

Próximo passo nós precisamos logar no hamachi e então, logar em uma rede
existente ou então criarmos uma nova:
#Login no Hamachi
$sudo hamachi -c /etc/hamachi login
#Para entrar em uma rede existente
$sudo hamachi -c /etc/hamachi join network password
#Ou criar um arede nova
$sudo hamachi -c /etc/hamachi create network password
#Por último, ficar online na rede criada ou entrada
$sudo hamachi -c /etc/hamachi go-online network

Agora sua máquina está rodando seu próprio Hamachi VPN. A última parte da
instalação é um script escrito pelo Kamel que inicializará o hamachi em
cada inicialização.
#!/bin/sh
hamachi_start() {
echo “Starting hamachi…”
/sbin/tuncfg
/usr/bin/hamachi -c /etc/hamachi start
/bin/chmod 760 /var/run/tuncfg.sock
/bin/chgrp hamachi /var/run/tuncfg.sock
}
hamachi_stop() {
echo “Stopping hamachi…”
killall tuncfg
/usr/bin/hamachi -c /etc/hamachi stop
}
hamachi_restart() {
hamachi_stop
sleep 1
hamachi_start
}
case “$1″ in
’start’)
hamachi_start
;;
’stop’)
hamachi_stop
;;
‘restart’)
hamachi_restart
;;
*)
hamachi_start
esac

Por último, você deve tornar o script executável e adicionar na inicialização:
$sudo chmod +x /etc/init.d/hamachi
$sudo update-rc.d hamachi defaults

1e) Configuração do Hamachi – Aplicação de Usuário

Seguindo esta parte, se você quer que o hamachi rode como uma aplicação
e roda-lo a partir de um front-end gtk muito legal.

a) Configuração básica
Criando uma configuração inicial:
#hamachi-init

O resultado vai ser algo como isto:
Initializing Hamachi configuration (/home/user/.hamachi). Please wait ..
generating 2048-bit RSA keypair .. ok
making (/home/user/.hamachi directory .. ok
saving (/home/user/.hamachi/client.pub .. ok
saving (/home/user/.hamachi/client.pri .. ok
saving (/home/user/.hamachi/state .. ok
Authentication information has been created. Hamachi can now be started with
‘hamachi start’ command and then brought online with ‘hamachi login’.

Próximo passo, iniciar o hamachi

#hamachi start

Agora que estamos iniciados e rodando precisamos setar o apelido
#hamachi set-nick “SeuApelidoAqui”

Então você deve logar no Hamachi e estando logado entrar em uma rede ou criar uma:
#Login no Hamachi
hamachi login
#Para entrar em uma rede existente
hamachi join network password
#Ou criar uma nova
hamachi create network password
#Por último, ficar online na rede criada ou conectada
hamachi go-online network

1e2) Interface gráfica para o hamachi

Primeiro você deve faze ro download do arquivo aqui

Após, simplesmente descompacte e copie o binário para o /usr/bin e sete
permissão para rodar (chmod +x)
tar xfz gHamachi_gtk2.tar.gz
sudo mv ghamachi /usr/bin/
sudo chmod +x /usr/bin/ghamachi

Bueno tamso quase lá! Agora que já fizemos é só chamar

Fonte: http://fenixneo.blogspot.com/

Como montar Imagens CDs em Linux

Comando para montar arquivos .Iso:



sudo mount -t iso9660 -o loop archivo.iso /directorio/dondeMontas




de preferência monta no mesmo do cdrom: /media/cdrom



Converter arquivos .mdf e .mds em iso:



sudo apt-get install mdf2iso



o comando para conversão:



mdf2iso arquivo.mdf novaimagem.iso



ex.: mdf2iso office2007.mdf office2007.iso



Finalmente Convertemos a imagem.



Fonte: http://fenixneo.blogspot.com/

Dicas para comprar com “segurança” no Mercado Livre

Segue abaixo algumas dicas que o Renato dá sobre sua experiencia com o Mercado livre.

Oi pessoal,
Já faz algum tempo que não nos falamos, não é verdade?
Resolvi fazer um post “preventivo” hoje, para ajudar as pessoas a evitar cair em armadilhas.
Espero que com isso, menos pessoas levem golpes e acabem indo parar na petição para reclamar do Mercado Livre.
Temos que ter bom senso também e entender que em alguns casos, o Mercado Livre REALMENTE não tem culpa DIRETA sobre os ocorridos, afinal, se um médico te diz pra tomar aspirinas e você toma gardenal, a probabilidade de ter sérios problemas é grande não é mesmo?
Assim sendo, vamos às dicas:

Dica 1:
Se conselho fosse bom à gente não dava, vendia, mas é bom lembrar:
O barato sai caro.
Preços muito abaixo do comum?
Desconfie, pode ser golpe (geralmente é) ou algum produto recondicionado – tem gente que conserta um produto e vende depois como se fosse novo. (e nem sempre funciona)
Melhor pagar um pouco mais caro, mas ter a certeza de receber o produto ou ter a certeza que o produto é realmente o anunciado.
Se possível, prefira produtos com nota fiscal. Principalmente os muito baratos

Dica 2:
Atenção
Procure muito bem o vendedor que você vai comprar, olhe a sua quantidade de vendas e principalmente suas qualificações. Se o vendedor tiver qualificações negativas, leia todas.
Para encontrar um ótimo vendedor, procure pelo que tenha maior número de vendas e maior número de qualificações positivas. Para ele chegar a estes números com toda certeza levou muito tempo e trabalho, (e dinheiro gasto) ele não vai querer sair dando golpes com risco de perder sua reputação. (e seu dinheiro investido)

Vendedores com poucas vendas ou nenhuma?

Eu só negocio com este tipo de vendedor sob três condições:
1) Mercado Pago com liberação do dinheiro APÓS receber a mercadoria e verificá-la
2) Transação através do Pagafácil, que é como o MercadoPago, mas na minha opinião é 200% mais seguro
3) Entrega em mãos
Se você quer comprar com mais segurança faça o mesmo. Alguém pode muito bem criar uma conta falsa e começar a vender. E para ajudar, ele pode criar outras contas falsas e comprar o próprio produto apenas para se qualificar positivamente.
Repito novamente o que disse na primeira dica: O barato sai caro. Prefira um vendedor mais experiente.

Dica 3:
Esqueça este negocio de sedex a cobrar, o vendedor pode muito bem lhe enviar uma caixa vazia, e você só pode abrir depois que pagou e ai já é tarde demais. (Isso já QUASE aconteceu comigo).

Dica 4:
Leia muito bem a descrição do produto e faça todas as suas perguntas antes de dar o lance, talvez o que o vendedor está vendendo pode não ser aquilo que você pensa, depois de comprar pode ser tarde de mais para reclamar.

Dica 5:
Preste atenção se o vendedor é educado, rápido e atencioso, antes de pagar entre em contato pelo telefone do vendedor.
Se for uma pessoa mal educada ou lenta para responder seus e-mails pode ter uma certeza, se você tiver problemas com o produto e necessitar trocar vai ter muita dor de cabeça.

Dica 6:
Se você for pagar via depósito bancário verifique se o titular da conta que você vai depositar é a mesma pessoa do Mercado Livre.
Nunca, EM NENHUMA HIPÓTESE, faça depósito na conta de terceiros.
Hoje em dia é muito fácil abrir uma conta na Caixa Econômica, por exemplo, então este papo de que não tem conta própria é DESCULPA ESFARRAPADA. E o pior: Depositando o dinheiro na conta de terceiros, dá muito mais trabalho caso algo dê errado, pois você terá que pedir quebra de sigilo bancário e isso é muito complicado de se conseguir.
Muita gente pode criar um cadastro falso para não expor seus dados e pedir para que você deposite em uma conta.

Dica 7:
Se você quer chegar ao máximo de segurança na sua compra, utilize uma ferramenta de intermediação financeira, como o Pagafácil ou o Mercado Pago. Estes serviços intermediam a negociação. Acontece de forma semelhante para ambos os casos (se bem que eu prefiro o Pagafacil):
1) Você compra o produto
2) Você e o vendedor cadastram a transação
3) Você deposita o dinheiro na conta do Intermediador
4) O vendedor recebe um email informando que o dinheiro já se encontra nas mãos do Intermediador e que o produto pode ser liberado.
5) O vendedor te envia o produto
6) Depois de verificar o estado do mesmo, você entra no site e libera o pagamento para o vendedor.
Ambos os serviços são muito funcionais, mas eu prefiro o Pagafacil porque estão havendo muitas fraudes no MercadoPago, onde estão sendo enviados emails falsos para o vendedor dizendo que o dinheiro foi depositado, e os vendedores, numa atitude que vai de INOCENTE à ESTÚPIDA, liberam a mercadoria sem ao menos FAZER UM LOGIN E VERIFICAR se o pagamento REALMENTE foi efetuado. E aí já era: Perdem o dinheiro e a mercadoria!!!

Dica 8:
Não confie em e-mails, como você pode ver no post do Meiobit a irmã da vitima foi enganada com um e-mail falso, no e-mail dizia que o comprador havia pagado, contudo ao acessar o Mercado Livre ela viu que não havia pagamento algum lá.
Portanto desconfie sempre de e-mails, sempre confirme pelo próprio mercado livre.

Dica 9:
Nunca, em nenhuma hipótese, libere o dinheiro do MercadoPago antes de receber a mercadoria.
O MercadoPago foi criado justamente pra impedir que o vendedor ponha as mãos no seu dinheiro antes de lhe enviar o produto. Então porque raios você vai liberar o dinheiro com antecedência??? Se é pra liberar antes, faz logo um dopósito antecipado na conta do vendedor e pronto. Se o cara for picareta, você vai perder o dinheiro de qualquer jeito!!!

Dica 10:
Se possível, faça uma consulta ao CPF ou CNPJ do vendedor antes de efetuar a compra.
Existem empresas especializadas em fornecer este tipo de informação. Geralmente o custo de uma consulta desta varia entre R$5,00 e R$10,00 mas os benefícios que este pequeno investimento podem lhe trazer não tem preço!!!
Através deste serviço, vocês podem saber várias informações valiosas que o ajudarão no processo de decisão e também no caso de vocês terem que “correr atrás do prejuízo” no polícia, uma vez que a consulta dá um perfil completo da pessoa.
Se o vendedor diz que se chama “João da Silva” e te dá um CPF que pertence à “José da Silva” já esta configurado o crime de falsidade ideológica, logo a probabilidade de haver golpe é de quase 100% (a não ser nos casos de pessoas que foram injustamente expulsas do ML e que fizeram cadastros com outros CPF´s).
Estamos estudando a possibilidade de disponibilizar este serviço para que vocês possam negociar com mais tranquilidade.

Conclusão:
Com estas dicas sempre me dei bem comprando no Mercado Livre e acredito que agora vocês também serão mais felizes!!!
Lá existem bastantes produtos de qualidade e muita gente honesta, contudo também há muitos espertinhos e lembre-se:

“Caldo de galinha e bom senso não fazem mal a ninguém”

Coloquem estas dicas em prática e se por acaso se vocês levarem um calote de alguém no Mercado Livre, já sabem, eles não estão nem um pouco preocupados com vocês.

Agora é a vez de vocês, qual foi a experiência de vocês em relação ao Mercado Livre, bem sucedida, enganado, dicas?
Espero poder ajudar vocês e muitos outros que AINDA não foram vítimas do MercadoLivre.

Fonte: http://www.nerdgames.net/

Entidades de caracteres do HTML 4.01

O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1,) que contém os caracteres com acentos usados pelas línguas da Europa Ocidental. Os caracteres acentuados da língua portuguesa podem ser todos obtidos usando este conjunto de caracteres.

9.3 Entidades para caracteres do conjunto ASCII e os nomes definidos em HTML

Os caracteres da primeira metade do conjunto ISO-8859-1 (códigos desde 0 a 127) são os mesmos que os caracteres padrão ASCII de 7 BITs. A maior parte destes caracteres pode ser usada directamente sem necessidade de recorrer a entidades porque estão sempre disponíveis em todas as máquinas qualquer que seja a sua configuração.

Os caracteres finais do conjunto ISO-8859-1 (códigos desde 160 até 255) podem ser usados recorrendo a nomes de entidade de carácter definidos em HTML.

Nota: os nomes das entidades são sensíveis ao tipo de letra (maiúscula ou minúscula.)

Resultado	Descrição	Nome da Entidade	Código Numérico
“	aspas	“	“
&	“e” comercial	&	&
<	menor do que	<	<
>	maior do que	>	>

9.4 Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)

Resultado	Descrição	Nome da Entidade	Código Numérico
	inserir espaço sem mudar de linha (“non-breaking space”)
¡	ponto de exclamação invertido	¡	¡
¤	dinheiro	¤	¤
¢	cêntimo (de dollar)	¢	¢
£	libra esterlina	£	£
¥	yen	¥	¥
¦	barra vertical descontínua	¦	¦
§	secção	§	§
¨	acento diérese (trema, metafonia)	¨	¨
©	direitos de cópia (“copyright”)	©	©
ª	ordinal feminino	ª	ª
«	abertura de aspas angulares	«	«
¬	negação	¬	¬
­	hífen “soft” (pode acontecer uma quebra de linha junto ao hífen)	­	­
®	marca registada	®	®
¯	sinal (acento) mácron	¯	¯
°	graus	°	°
±	mais ou menos	±	±
²	2 sobreescrito	²	²
³	3 sobreescrito	³	³
´	acento agudo	´	´
µ	micro	µ	µ
¶	parágrafo	¶	¶
·	ponto a meia altura	·	·
¸	cedilha	¸	¸
¹	1 sobreescrito	¹	¹
º	ordinal masculino	º	º
»	fecho de aspas angulares	»	»
¼	fracção 1/4	¼	¼
½	fracção 1/2	½	½
¾	fracção 3/4	¾	¾
¿	ponto de interrogação invertido	¿	¿
×	sinal de multiplicação	×	×
÷	sinal de divisão	÷	÷
À	a grande com acento grave	À	À
Á	a grande com acento agudo	Á	Á
Â	a grande com acento circunflexo	Â	Â
Ã	a grande com til	Ã	Ã
Ä	a grande com diérese	Ä	Ä
Å	a grande com anel	Å	Å
Æ	ae ligados, grandes	Æ	Æ
Ç	c grande com cedilha	Ç	Ç
È	e grande com acento grave	È	È
É	e grande com acento agudo	É	É
Ê	e grande com acento circunflexo	Ê	Ê
Ë	e grande com diérese	Ë	Ë
Ì	i grande com acento grave	Ì	Ì
Í	i grande com acento agudo	Í	Í
Î	i grande com acento circunflexo	Î	Î
Ï	i grande com diérese	Ï	Ï
Ð	eth grande (Islandês)	Ð	Ð
Ñ	n grande com til	Ñ	Ñ
Ò	o grande com acento grave	Ò	Ò
Ó	o grande com acento agudo	Ó	Ó
Ô	o grande com acento circunflexo	Ô	Ô
Õ	o grande com til	Õ	Õ
Ö	o grande com diérese	Ö	Ö
Ø	o grande com traço oblíquio	Ø	Ø
Ù	u grande com acento grave	Ù	Ù
Ú	u grande com acento agudo	Ú	Ú
Û	u grande com acento circunflexo	Û	Û
Ü	u grande com diérese	Ü	Ü
Ý	y grande com acento agudo	Ý	Ý
Þ	thorn grande (Islandês)	Þ	Þ
ß	carácter que representa a ligação sz, minúsculo (Alemão)	ß	ß
à	a pequeno com acento grave	à	à
á	a pequeno com acento agudo	á	á
â	a pequeno com acento circunflexo	â	â
ã	a pequeno com til	ã	ã
ä	a pequeno com diérese	ä	ä
å	a pequeno com anel	å	å
æ	ligação ae, minúscula	æ	æ
ç	c pequeno com cedilha	ç	ç
è	e pequeno com acento grave	è	è
é	e pequeno com acento agudo	é	é
ê	e pequeno com acento circunflexo	ê	ê
ë	e pequeno com diérese	ë	ë
ì	i pequeno com acento grave	ì	ì
í	i pequeno com acento agudo	í	í
î	i pequeno com acento circunflexo	î	î
ï	i pequeno com diérese	ï	ï
ð	eth pequeno (Islandês)	ð	ð
ñ	n pequeno com til	ñ	ñ
ò	o pequeno com acento grave	ò	ò
ó	o pequeno com acento agudo	ó	ó
ô	o pequeno com acento circunflexo	ô	ô
õ	o pequeno com til	õ	õ
ö	o pequeno com diérese	ö	ö
ø	o pequeno com traço oblíquo	ø	ø
ù	u pequeno com acento grave	ù	ù
ú	u pequeno com acento agudo	ú	ú
û	u pequeno com acento circunflexo	û	û
ü	u pequeno com diérese	ü	ü
ý	y pequeno com acento agudo	ý	ý
þ	thorn pequeno (Islandês)	þ	þ
ÿ	y pequeno com diérese	ÿ	ÿ

9.5 Entidades HTML não pertencentes ao conjunto ISO 8859-1

Resultado	Descrição	Nome da Entidade	Código Numérico
€	Modeda Euro	€	€
•	Marca para item em lista não ordenada (“bullet”)	•	•
™	Marca comercial (“Trade Mark”)	™	™
…	três pontos (elipse)	…	…
′	plica	′	′
″+amp;Prime;	plica dupla	″	″
“	aspas (elegantes) do lado esquerdo	“	“
”	aspas (elegantes) do lado direito	”	”
→+amp;rarr;	seta para a direita	→	→
←+amp;larr;	seta para a esquerda	←	←
Œ	ligação OE grande	Œ	Œ
œ	ligação oe pequena	œ	œ
Š	s grande com um caron	Š	Š
š	s pequeno com um caron	š	š
Ÿ	y grande com diérese	Ÿ	Ÿ
ˆ	carácter modificador para acento circunflexo	ˆ	ˆ
˜	til pequeno	˜	˜
–	traço “en dash”	–	–
—	traço “em dash”	—	—
‘	aspa esquerda simples	‘	‘
’	aspa direita simples	’	’

Fonte: http://www.artifice.web.pt

Impact – Happiest girl

Para os fãs de Eurodance, um boa, música legal e com belas atrizes(rs) , so não posso colocar mais elógios senão minha namorada olha isso aqui e ai eu to no vinagre

Letra:

Impact – Happiest girl

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest girl,
Just be my baby…

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest girl,
Just be my baby…

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest girl,
Just be my baby…

The happiest,the happiest,the happiest,the happiest…

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest girl,
Just be my baby…

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest girl,
Just be my baby…

I got enough,I got enough,I got enough,I got enough…

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest girl,
Just be my baby…

The happiest,the happiest,the happiest,the happiest…

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest girl,
Just be my baby…

I got enough when I see your smile,
You make me want you and you do it with style,
You gonna make me the happiest gïrl,
Just be my baby…

Colocando estilo no elemento legend com CSS

CSS:

 fieldset {position:relative} /* For legend positioning */
#el01 legend {padding:0} /* Remove padding */
#el02 legend { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd;
}
#el03 legend {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
#el04 legend {margin:0} /* Remove margin */
#el05 legend {border:2px dotted #00f} /* Border width, style and colour */
#el06 legend { /* Position at top left corner of fieldset */
position:absolute;
top:0;
left:0;
}
#el07 legend {font-family:”Courier New”,Courier} /* Different font */
#el08 legend {font-size:2em} /* Bigger text */
#el09 legend {font-size:0.5em} /* Smaller text */
#el10 legend {font-weight:bold} /* Bold text */
#el11 legend {padding:2em} /* Increase padding */
#el12 legend {text-align:right} /* Change text alignment */

HTML:

<fieldset id=”el##”>
<legend>#el##</legend>
<p>Some text.</p>
</fieldset>

Resultado:

Resultado com outros SO:

1. Camino 1, Mac OS X 10.4.8
2. Firefox 2.0.0.1, Mac OS X 10.4.8
3. Firefox 2.0.0.1, Ubuntu 6.10
4. Firefox 2.0.0.1, Windows XP
5. iCab 3.0.3, Mac OS X 10.4.8
6. Internet Explorer 6, Windows XP
7. Internet Explorer 7, Windows XP
8. Konqueror 3.5.5, Kubuntu
9. OmniWeb 5.5.1, Mac OS X 10.4.8
10. Opera 9.10, Mac OS X 10.4.8
11. Opera 9.10, Ubuntu 6.10
12. Opera 9.10, Windows XP
13. Safari 2.0.4, Mac OS X 10.4.8
14. WebKit 420+, Mac OS X 10.4.8

Fonte: http://www.456bereastreet.com

Estilo File Select com CSS

CSS:

 #el01 {width:100%} /* Width */
#el02 { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd;
}
#el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
#el04 {border-width:6px} /* Border width */
#el05 {border:2px dotted #00f} /* Border width, style and colour */
#el06 {border:none} /* No border */
#el07 {font-family:”Courier New”,Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:1em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */

HTML:

 <input type=”file”>

Resultado:

Resultado com outros SO:

1. Camino 1, Mac OS X 10.4.8
2. Firefox 2.0.0.1, Mac OS X 10.4.8
3. Firefox 2.0.0.1, Ubuntu 6.10
4. Firefox 2.0.0.1, Windows XP
5. iCab 3.0.3, Mac OS X 10.4.8
6. Internet Explorer 6, Windows XP
7. Internet Explorer 7, Windows XP
8. Konqueror 3.5.5, Kubuntu
9. OmniWeb 5.5.1, Mac OS X 10.4.8
10. Opera 9.10, Mac OS X 10.4.8
11. Opera 9.10, Ubuntu 6.10
12. Opera 9.10, Windows XP
13. Safari 2.0.4, Mac OS X 10.4.8
14. WebKit 420+, Mac OS X 10.4.8

Fonte: http://www.456bereastreet.com

Colocando estilo no elemento fieldset com CSS

CSS:

#el01 {padding:0} /* Remove padding */
#el02 { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd
}
#el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
#el04 {border-width:6px} /* Border width */
#el05 {border:2px dotted #00f} /* Border width, style and colour */
#el06 {border:none} /* No border */
#el07 {font-family:”Courier New”,Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:2em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */
fieldset p {margin:0} /* Remove margins from p elements inside fieldsets */

HTML:

<fieldset id=”el##”>
<legend>#el##</legend>
<p>Some text.</p>
</fieldset>

Resultado:

Resultados em outros SO:

1. Camino 1, Mac OS X 10.4.8
2. Firefox 2.0.0.1, Mac OS X 10.4.8
3. Firefox 2.0.0.1, Ubuntu 6.10
4. Firefox 2.0.0.1, Windows XP
5. iCab 3.0.3, Mac OS X 10.4.8
6. Internet Explorer 6, Windows XP
7. Internet Explorer 7, Windows XP
8. Konqueror 3.5.5, Kubuntu
9. OmniWeb 5.5.1, Mac OS X 10.4.8
10. Opera 9.10, Mac OS X 10.4.8
11. Opera 9.10, Ubuntu 6.10
12. Opera 9.10, Windows XP
13. Safari 2.0.4, Mac OS X 10.4.8
14. WebKit 420+, Mac OS X 10.4.8

Fonte: http://www.456bereastreet.com

Usabilidade em Formulários. Marca campo em uso

Funciona tanto no Firefox(2.0) como no IE(6.0)

CSS:

 <style type=”text/css”>
input {
border: 2px solid #ccc;
}
input:focus {
border: 2px solid #000;
}
</style>

HTML:

<input type=”text” name=”nombredecampo” id=”nombredecampo” onfocus=”this.style.border=’1px solid #f00′” onblur=”this.style.border=’1px solid #bbb’”>

Resultado:

Fonte: http://www.webintenta.com

Layout-o-Matic

Tem dificuldades na hora de gerar um layout de duas/tres colunas?

Seus probremas terminaram-se!!!(By Seu Creyson)

Chegou o revolucionário Layout-o-Matic, ótimo gerador de layout

Com ele vc pode tanto baixar o codigo gerado como visualizar no proprio site.

Estilos para Tabelas

Imagem de algumas tabelas

Neste site existe existe varias estilos para tabelas, vale a pena conferir.

Fazendo Menu Horizontal com CSS

HTML:

 <div id=”menuhoriz”>
<ul>
<li>Bot&oacute;n uno</li>
<li>Bot&oacute;n dos</li>
<li>Bot&oacute;n tres</li>
</ul>
</div>

CSS:

#menuhoriz ul li {
display: inline;
padding: 2px 7px; /*Separar el texto*/
margin:5px; /* Separar los botones */
background-color:#E4E4E4; /* Color de fondo */
}
#menuhoriz ul li:hover {
background-color:#CCCCCC; /* Color de fondo sobre el boton */
cursor: pointer; /* cambiar el aspecto del puntero */
}
#menuhoriz ul {
/* Linea para delimitar la botonera */
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E4E4E4;
}

Algumas idéias para menus horizontais

Fonte: http://www.webintenta.com

Gerador de cantos redondos para CSS

Para aqueles que tem sempre dificuldades para fazer uma div com cantos arredondados segue ai um ótimo site que te ajuda nesta árdua tarefa.

http://www.spiffybox.com/

Efeito “hover” em um quadro

CSS:

 #Efecto_Hover ul {
list-style-type: none;
width: 350px;
margin:0px;
padding:0px;
}

#Efecto_Hover li {
border: 1px solid #999;
border-width: 1px 0;
margin: 5px 0px;
}

#Efecto_Hover li a {
color: #666;
display: block;
font: bold 16px Arial, Helvetica, sans-serif;
padding: 2px;
text-decoration: none;
}

* html #Efecto_Hover li a {
width: 350px;
}

#Efecto_Hover li a:hover {
background: #E2E2E2;
}

#Efecto_Hover a .descripcion {
color: #333;
display: block;
font: normal 10px Verdana, Helvetica, sans-serif;
ine-height: 125%;
}

#Efecto_Hover a .categoria {
color: #409209;
font: normal 9px Verdana, Helvetica, sans-serif;
line-height: 150%;
}

HTML:

<div id=”Efecto_Hover”>
<ul>
<li>
<a href=”#”>Cabecera numero uno
<span class=”descripcion”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
</span>
<span class=”categoria”>CSS</span></a>
</li>
<li>
<a href=”#”>Cabecera numero dos
<span class=”descripcion”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
</span>
<span class=”categoria”>Photoshop</span></a>
</li>
<li>
<a href=”#”>Cabecera numero tres
<span class=”descripcion”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
</span>
<span class=”categoria”>Recursos</span></a>
</li>
</ul>
</div>

Fonte: http://www.webintenta.com

Menu com CSS e Javascript

CSS:

 #MenuCSS_JS{
border: 1px solid #CCC;
width: 170px;
}
#MenuCSS_Js a{
font: bold 11px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: #999;
text-decoration: none;
border-bottom: 1px solid #CCC;
}
#MenuCSS_Js a{
width: auto;
}
#MenuCSS_Js a:hover{
background-color: #E4E4E4;
}
#DescripcionLink{
width: 100%;
height: 4em;
filter:alpha(opacity=0);
-moz-opacity:0;
color:#669900;
font:10px Verdana;
}

Javascript:

 <script type=”text/javascript”>
var OpacidadInicial=0

function MostrarTexto(TextoAMostrar){
if (!document.getElementById)
return
textcontainerobj=document.getElementById(“DescripcionLink”)
browserdetect=textcontainerobj.filters? “ie” : typeof                               textcontainerobj.style.MozOpacity==”string”? “mozilla” : “”
instantset(OpacidadInicial)
document.getElementById(“DescripcionLink”).innerHTML=TextoAMostrar
highlighting=setInterval(“gradualfade(textcontainerobj)”,70)
}

function OcultarTexto(){
LimpiarTiempo()
instantset(OpacidadInicial)
}

function instantset(degree){
if (browserdetect==”mozilla”)
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect==”ie”)
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && OpacidadInicial==0)
document.getElementById(“DescripcionLink”).innerHTML=”"
}
function LimpiarTiempo(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect==”mozilla” && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect==”ie” && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}

HTML:

<div id=”MenuCSS_Js”>
<a href=”http://www.webintenta.com/AJAX” onMouseover=”MostrarTexto(‘Tutoriales e información sobre AJAX’)” onMouseout=”OcultarTexto()”>Apuntes AJAX</a>
<a href=”http://www.webintenta.com/Photoshop” onMouseover=”MostrarTexto(‘Apuntes,trucos, pinceles y tutoriales de Photoshop’)” onMouseout=”OcultarTexto()”>Photoshop</a>
<a href=”http://www.webintenta.com/Javascript” onMouseover=”MostrarTexto(‘Scripts de código y tutoriales de Javascript para usar en la web 2.0′)” onMouseout=”OcultarTexto()”>Javascript</a>
<a href=”http://www.webintenta.com/CSS” onMouseover=”MostrarTexto(‘Recursos online, apuntes y códigos CSS’)” onMouseout=”OcultarTexto()”>CSS</a>
<div id=”DescripcionLink”></div>
</div>

Veja o Exemplo

Fonte: http://www.webintenta.com

CSS Tools

Várias feramentas para se trabalhar com CSS

• Em Calculator estimates Em size equivalent to px size. Could become useful since more standardistas are adpoting use of Em sizing (vs. px sizing) to define the max width of their layout, a technique which I intend to investigate more thoroughly.
• Clean CSS — yet another CSS cleaner/optimizer.
• CSS Tweak — another CSS optimizer from cssdev.com
• westciv’s complete CSS guide
• MODI — Another amazing bookmarklet from Slayer Office. MODI is a mouse-over DOM inspector.
• W3C CSS Validator
• I Like Your Color via Red Alt — Type in the URL and it grabs the interface colors and display them in hex. Freakin’ Awsome!
• XHTML Semantic Generator — The XHTML Semantic Generator is a system designed to help developers prototype and test URL’s to ensure they contain basic accessibility and usability features present in modern web technologies, and to automatically implement them if possible.
• Special Characters List via manicalrage.net
• Online CSS Optimizer
• 4096 Color Wheel
• ColorCombos — Yet another online color pallet tool.
• COLORlovers — nice collection of user-picked colors & palettes with hex code.
• Weelstyled.com’s color scheme generator
• CSS Hacks Browser Support Chart
• CSS Compressor — squeeze the snot of that CSS.

CSS-based design galleries

• CSSElite
• openwebdesign.org is a community of designers and site owners sharing free web design templates as well as web design information.
• CSS thesis
• Wow-Factor
• Web Standards Awards
• W3 Compliant Sites
• Unmatched Style
• The Weekly Standards
• CSS-Mania
• CSS Drive
• CSS Import
• CSS Zen Garden
• CSS Vault
• CSS Beauty
• Stylegala

CSS-based Layout:

• CSS grid calculator allows you to play with CSS layout in a flash app and returns the CSS code for it when you’re done.
• Yahoo! UI Library: Grids CSS — “…Grids CSS is a suite of seven web page templates and the ability to nest grids of one to four columns within the content area of those templates.”
• How to build dynamic-width pages now — another article on using javascript to change CSS-based layout based on screen resolutions.
• mollio.org has some very nice collection of 1/2/3 column layout templates that validates and allows content column to come first in the source order.
• Layout Gala is a nice experiment of producing many different layouts via CSS with the same HTML markup.
• A very thorough CSS layout generator via positioniseverything.
• clagnut has a good rundown on variable fixed width layout, or commonly referred to as “drop column layout”.
• css-discuss compares Three Column Layouts.
• The search for the bullet-proof, flexible, any-order, 3-column layout continues… the latest offering is Matthew Levine’s “Holy Grail” technique which was published on ALA and looked very very promising… until it turns out there are some unresolvable bugs including a strange vertical-resize bug in IE. Still it’s the best contender for do-it-all solution out there along with the “One True Layout” technique.
• CSS Template collections at intensivstation.ch
• Dynamic Resolution Dependent Layout describes a technique that uses javascript to serve up different CSS based on the browser dimension. This might be useful if you are, for instance, trying to serve up fixed vs. fluid layout based on browser size.
• In search of the One True Layout — Position is Everything investigates a way to order columns logically in the source while displaying them in any order desired. For any number of columns.
• Creating Liquid Faux Columns — a thorough look at creating equal-height, 3-column, liquid layout in CSS.
• Making Simple Work of Complex CSS Layouts — A nice tutorial/presentation on CSS-based layout.
• Flexi-Floats — 3 Column CSS Layout – Fluid, Multi-Column Stretch
• layoutomatic
• Good list of table-less CSS layouts via Coda.
• Jello — another flexible liquid layout.
• Elastic Faux Columns — CSS faux columns via background-position property.
• Progressive Layout — liquid layout with width controlled by JS.

CSS-based Boxes:

• Spanky Corners from sitepoint is yet another take on generating rounded corner boxes. This approach uses no javascript nor extra markup cruft but it does rely on images to create the corners.
• spiffycorners is yet another way of making rounded corner boxes. It’s unique in that it paints anti-aliased corners in CSS without using images or javascript. However it does require a lot of extra markup. Pick your poison.
• Nifty Cube — v3 of nifty corners. New features make it more flexible, less crufty.
• CSS Rounded Corners ‘Roundup’ via smileycat.com
• There’s a detailed tutorial on Onion skinned drop shadow technique which (1) Automatically expand and contract to fit any object, without specifying widths, (2) Allow you to modify the shadow depth with no image manipulation, and (3) Render the same across all browsers without cutting any corners. Except for 3-layer deep markup cruft, it looks like a real winner.
  • This is pretty remarkable. The day Onion skinned drop shadow hits the net, someone felt exactly the way I did: good technique, unfortunate code cruf. So what did sporkmonger do? He found a way to remove all the wrapper div cruft by using some clever javascript. The result is a clean img tag with one CSS class. Absolutely brilliant. Can’t get over that it all happened in just one day without any coordination. The Web is still full of surprises for me.
• smileycat has a comprehensive round-up on different CSS techniques for presenting rounded corner boxes.
• If you don’t mind the heavy markup cruft (8 nested div’s!), dragon-lab’s Octopus Engine seems like a really winner for creating wonderful looking custom bordered boxes with shadows.
• DOM Corners — Another way to draw rounded corner boxes. This technique uses images but focuses on reducing the code cruft.
• Scalable rounded edges using definition list markup.
• Table Scroll — two different methods of presenting a long table in a scrolling DIV box.
• CSS PLAY — Many “The power of CSS” demos by Stu Nicholls.
• A good summary overview of CSS layout techniques over at particletree.com
• Airtight Corners — Another CSS technique to create rounded corners. This one uses only one image, but the width of the box must be defined.
• Customizing custom corners and borders via 456bereastreet
• CSS drop shadow — this method gets around IE’s negative margin positioning problem by using position:relative; on the inner block element.
• Mimic iframe with CSS via overflow:auto and height properties
• Transparent Custome Corners and Borders — Another rounded corner box by JS. via 456bereastreet.com
• “More” Nifty Corners — v2 of CSS+JS only to round box corners.

CSS-based Menus, Lists and Navigation:

• Hoverbox Menu — image-zoomed navigation using hoverbox technique.
• The ultimate tabbed menu from Dragon Labs — lots of variety, demo’s, and downloads.
• Cross browser tabbed pages with embedded links is another good one from stu nicholls. This one shows how to build no-JS, CSS-only tabbed menus that present CSS scroll box content when you hover over them.
• A nice demo of OS X dock like magnification effect on navigation links. Currently only supported on Mozilla based browsers
• A good assortment of vertical tab navigation via exploding-boy.com.
• Centered Tabs with CSS takes Douglas Bowman’s “sliding door” tab navigation markup and tweaks it to allow for center justified tabs.
• Simple website menu — This is a simple list-based menu, with CSS2 menu triggers for browsers that support them, and a touch of equivalent javascript for others.
• Deluxe CSS drop down menus and fly-outs
• ADxMenu — a nested unordered list based nav menu. Even has .htc to combat IE/Win issues with li:hover
• Using single-image sprites for mouseover navigation
• CSS unordered list with mouse-over popup info via webreference.com
• CSS tabs with sub-menus via kalsey.com
• more accessible graphic menu
• Drop Down Menu: Horizontal Style
• qooxdoo is an Open Source (licensed under LGPL) DOM-based javascript toolkit. qooxdoo starts where simple HTML is not enough. It can help you get your rich web application interface done easier than ever.
• Floated Minitabs
• Complex Dynamic Lists

CSS and Form Elements:

• Prettier Accessible Forms over at ALA shows you a technique that uses inline-blocks, fieldsets and legends to create an nicely styled form that’s also accessible and degrades well.
• formArchitect provides an online tool that creates complex html forms without using tables for layout.
• Semantic horizontal Forms via skyrocket.be
• c82 has a good article on transforming cumbersome select box into a scrollable checklist with some nice-looking examples.
• Form layout using definition list — via clagnut.com
• CSS-only forms that don’t suck — good article on lining up those form elements with labels.
• One button, many destinations — collylogic.com on show/hiding form elements via JS.
• Form Text Area Tools — DHTML/CSS that enables functions like word count, maxlength limit, and resizable text area box.
• Styling Form Elements — A great reference to default & styled form pulldown menus, the notoriously difficult element to apply CSS styles consistently across browsers/platforms, can now look like this thanks to some fancy DOM scripting by Aaron Gustafson. The process is explained here.

CSS Image Replacement Techniques

• PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method that can handle word-wrap in a long heading. Could this replace sIFR?
• iIR: img Image Replacement by Aaron Gustafson is a technique to replace one image with another that could be useful for print version of the page, etc.
• Printing CSS background images (sort of) via wg shows you what I thought was impossible: CSS background images that prints. It’s pretty clever and uses list-style-image CSS property to make this happen.
• PHP + CSS Dynamic Text Replacement — “…Where the original Dynamic Text Replacement used JavaScript to replace the heading text, PHP+CSC Dynamic Text Replacement uses PHP’s output buffering functions to parse the page for heading tags, extract the heading text and assign an inline style that points to the image generation script.”
• CSS-Technique: Worn Type is a rather brilliant adaptation of image replacement technique that stretches your imagination. Nicely done!
• (SIMR) Single Image Multi Replacement uses a single image to replace more than one heading
• Image Replacement Maps
• MIR: Malarkey Image Replacement — Yes. Another method. This one is similar to negative text-indent method in theory but uses negative letter-spacing instead. Supposedly works in all but Opera.

CSS Optimization Techniques

• CSS Tweak is an online CSS optimizer with number of settings you can apply.
• CSS Formatter and Optimizer.
• Generating Dynamic CSS with PHP — via digital-web.com.

CSS Browser Support, Bugs and Hacks

• Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
• Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
• IE Word Wrap Doppelganger Bug — Sitepoint on how heading elements could leave a small trail of itself as it wraps to the next line in IE6.
• Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
• Easy CSS hacks for IE7 — Some CSS hacks that will work with IE7. Hey, you never know.
• Web Browser CSS Support with updated listings for IE7, Firefox 1.5, and Opera 8.5.
• snook.ca on the “+” CSS hack which you can use to target IE6 and IE7 only.
• On having layout reveals some information and workarounds for IE’s strange and proprietary ‘rendering-concept’: hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:
  • “…A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided.”
• Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
• IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
  • “…Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.”
• Ten more CSS tricks you may not know — includes few IE bug fix techniques
• The “Holly” Hack — taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
• CSS tests — a great list of all the CSS gotcha’s under one roof.
• max-width in IE using VERY little known IE-only CSS “Dynamic properties”
• List of @import hacks to hide CSS from different browsers.
• Essentials of CSS Hacking For Internet Explorer — an excellent list of quick hints on safeguarding your CSS against IE.
• Web browser standards support — Charts comparing IE 6, Firefox 1.0, and Opera 8.
• Full CSS property browser compatibility chart
• The perils of using XHTML properly — Potential pitfalls of declaring application/xhtml+xml MIME type.
• IE Double Float Margin Bug.

Misc CSS Tips and Tricks:

• Hot Dates with CSS shows how to make blog dates look like small calendar pages.
• A nice demo of experimenting with CSS-only solution to imagemap with popups using unordered list.
• Clagnut shows you how to have Line breaks in tooltips by using the carriage return entity &#013. How utterly simple!
• Styling check boxes and radio buttons only with CSS uses 100% CSS solution (via attribute value selector and positioned background images) to serve up customized form elements. It’s semantically correct and degrades well for browsers that doesn’t support this method (IE), but is it also accessible?
• Stuart Robertson’s CSS text shadow technique seems like one of the easiest-to-implement techniques I’ve come across. It uses :before pseudo element and supports both Safari and Firefox browsers.
• From “holy crap why didn’t I think of that” file… Airbag has a simple but great idea of using a ruler background images in CSS to check DIV sizing during development.
• CSS Colors: Take Control Using PHP is a wonderful tutorial from Barely Fitz on how to use PHP variables to represent colors in your CSS which you can then manipulate — quickly changing all the colors from a single source, generating new colors via algorythm, etc.
• Web Graphics has a CSS3 demo on using :target pseudo class to style anchor link targets.
• Dynamic Drive, a long time favorite DHTML code snippet depot of mine, has started a new spin-off: CSS Drive.
• A More Accessible Map — a new tutorial on ALA shows how to create an accessible map with tooltips via CSS and JS.
• Styling horizontal rules with CSS — “…Don’t waste hours trying to style horizontal rules consistently across different browsers. Instead wrap your HR in a DIV, set the HR to display none and style the surrounding DIV instead.”. Now why the heck didn’t I think of that?
• CSS image preloader technique from maratz.com — using background image CSS property on images to serve as image place holders.
• stefanhayden.com shows a neat (and easy) way to make sure the client fetches new CSS with HTML update: just add a variable at the end of the CSS with each update.
• Wrapping text around curves via CSS if you don’t mind the markup cruft.
• codylindley.com’s Pushpin Header Technique “…is a CSS solution for creating a stationary header out of the thead of a table while the table’s tbody remains scrollable”
• hovebox image gallery via sonspring. It’s sort of like mini-lightbox that enlarges the thumbnails on hover. Very nice.
• Beautifully Numbered Lists looks nice except that it’s not really an ordered list. Instead it used definition lists inside the ordered list for presentation — which means true standardistas might object.
• In what could only be catagorized under Uber-Anal department, ollicle.com how to alter CSS line-height based on paragraph width via javascript for optimal readbility.
• From “I didn’t know that” file… wg tells us that using − instead of a dash character prevents some browser from wrapping the words connected by it.
• Eric Meyer, the man with CSS skillz that payz da billz, reveals something I’ve never heard of before: line-height property can use unitless values! The differences between united vs. unitless declarations are well described in his article but I can’t believe that I had it all wrong. I’ve been telling everyone that “You must declare unit for ANY measurement values unless it’s zero”.
• loudandlonely has an interesting article on how to obscure your email address via CSS by using some clever a:link:before and a:link:after pseudo-elements.
• digital-web has a good run down on things to consider when using CSS typography.
• 456bereastreet takes a first crack at explaining CSS3 selectors
• Another good “footer at the bottom” using only CSS demo.
• Pup’s Box Flow Hack shows you how to allow even block items to flow around floating boxes.
• Simple(r) CSS Image Switcher — Unlike the orginal CSS image switcher, this version doesn’t use nested unordered lists. Instead, it uses just one unordered list, with the link image placed inside the anchor.
• Another very nice tutorial from 24ways. This time it’s Curly Quotes Without Images, a technique popular in citing blockquotes with enlarged quotation marks in the beginning and at the end of the quote. But without using background images.
• FACE is an interesting javascript-powered / CSS-controlled page animation technique.
• Defining CSS constants using PHP is a good article on using PHP to allow constants (‘variables’) in CSS. For instance you can use this technique to define a repetitive color in CSS as a variable. That way you only need to declare it once and only change that one instance should you want to change that color. Very handy.
• 24ways has a good article on using z-index attribute.
• apples-to-oranges.com has a fantastic tutorial on how to create great looking bar graphs with CSS
• Image map for detailed information showcases use of CSS to provide an image with mouse-over-section for detailed notes.
• From the “How the heck did I miss this” department: cssQuery a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.
• Bulletproof logos via simplebits
• Css Color Chart
• Check marking visited links
• CSS Gradients Demo — creating gradient background effect in CSS using server-side constants technique developed bu Shaun Inman.
• Creating s star rating using CSS
  • CSS Star Rating Part Deux is a follow-up to the aforementioned technique that adds the starting “state”.
  • And here’s an external article which wraps it all up with a tutorial on how to use CSS star rating with PHP and database.
• Image Placement Technique — Yes. Not “replacement” but “placement”.
• FooterStick — how to force the footer of a webpage to stick to the bottom of the viewport.
• Shaun Inman’s CSS-SSV — using PHP variables in CSS.
• CSS scroll box fade using alpha-channel PNG
• Styling visited links with :after pseudo class
• Footnotes with CSS and JS
• Restaurant menu layout in CSS via web-graphics.com
• CSS scale image — using em values to scale the images in CSS. via bigbaer.com
• Slantastic — create irregular shaped boxes.
• yDSF – Robust CSS Drop Shadows
• CSS sliding photo gallery — an interesting way to present equal-sized images on mouse hover
• alsacreations.com — Nice collection of CSS tutorials that covers most of the basics.
• Using CSS selectors to apply Javascript functionality — ‘click here to delete’ demo
• Flickr-style image map with only CSS
• Web Color Schemes — via returnofdesign.com
• Making the jump to tableless design — Andy Budd’s presentation at @media 2005.
• CSS Help Pile
• Simple Clearing of Floats — various methods of clearing floats.
• Visited links styling — via webdesign.maratz.com.
• mandarindesign’s text tricks.
• Sweet collection of CSS how-tos — via maratz.com
• HoverHelp — DHTML/CSS tool tips on hover.
• How-to: Giving To Hiram‚ masthead — Nice masthead design in CSS. via cameronmoll.com
• :focus and :not — 9rules.com discusses two less-known CSS pseudo clsses.
• Dusntan
• welstyled.com — CSS articles and tips including “min-height hack”, “the underscore hack”, “single line vertical centering”, “photocards”. etc.
• Couloir Slideshow Script — Wrong. It ain’t Flash. Just pure javascript/CSS goodness.
• WASP list some international sites that are inspired by CSS Zen Garden Project
• Creating “slants” effect in CSS with border properties.

Fonte: http://www.soxiam.com/Notes/CSSTools

Top 71 Abas de navegação em CSS

Artigos/Tutorials, menus e abas.

1. 11 CSS navigation menus : at Exploding Boy
2. 12 more CSS Navigation Menus. : at Exploding Boy
3. 14 Free Vertical CSS Menus : at Exploding Boy
4. 2-level horizontal navigation : demo at Duoh
5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
6. Accessible Image-Tab Rollovers : demo at Simplebits
7. ADxMenu : multiple menu examples at aPlus
8. A drop-down theme : at CSS Play
9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
10. Bulletproof Slants : demo at Simplebits
11. Centered Tabs with CSS : at 24ways
12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
14. Creating Indented Navigation Lists : A multi-level indented list
15. Creating Multicolumn Lists : at Builder.com
16. cssMenus – 4 Level Deep List Menu : at SolarDreamStudios
17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
18. CSS-Based Tabbed Menu : a simple tabbed menu.
19. CSS-based Navigation : demo at Nundroo
20. CSS: Double Lists : A single list that appears in two columns
21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
22. CSS only dropdown menu : at CSS Play
23. CSS only flyout menus : at CSS Play
24. CSS only flyout/dropdown menu : at CSS Play
25. CSS only flyout menu with transparency : at CSS Play
26. CSS only vertical sliding menu : at CSS Play
27. CSS Swag: Multi-Column Lists : at A List Apart
28. CSS Tabs : tabs without any images
29. CSS Tabs : list of various tab solutions
30. CSS tabs with Submenus : at Kalsey.
31. dTree Navigation Menu : Javascripts Tree at Destroydrop
32. Definition lists – misused or misunderstood? : appropriate uses of definition lists
33. Do You Want To Do That With CSS? – Multiple Column Lists : multi-column lists.
34. Drop-Down Menus, Horizontal Style : at A List Apart
35. Float Mini tabs : at Web-Graphics
36. Flowing a List Across Multiple Columns : A table without using tables.
37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
39. Hidden tab menu : at CSS Play
40. How to Style a Definition List with CSS : at WebReference
41. How to Style an Unordered List with CSS : at WebReference
42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
43. Hybrid CSS Dropdowns : at a List Apart
44. Inline Mini Tabs : at Web-Graphics
45. Intelligent Menus : CSS and PHP menu at PhotoMatt.net
46. Inverted Sliding Doors Tabs : at 456BereaStreet
47. Light Weight Multi Level Menu : at CssCreator
48. List Display Problems In Explorer For Windows : list hack for IE
49. Listamatic : simple lists; various styles.
50. Listamatic2 : nexted lists; various styles
51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
52. Mini-Tab Shapes : demo at Simplebits
53. Mini-Tab Shapes 2 : demo at Simplebits
54. More than Just Bullets : at W3.org
55. Multiple Column Lists : at css-discuss
56. A Navbar Using Lists : A lightweight nav bar at WestCiv
57. Navigation Matrix Reloaded : at SuperfluousBanter
58. Remote Control CSS : examples of lists styled differently
59. Remote Control CSS Revisited – Caving in to peer pressure : multi-column remote control
60. Rounding Tab Corners : by Eric A. Meyer.
61. Simple CSS Tabs : at SilverOrange
62. Simplified CSS Tabs : demo at Simplebits
63. Sliding Doors : at A List Apart
64. Spruced-Up Site Maps : sitemaps as lists
65. Styling Nested List : at SimpleBits
66. Suckerfish Dropdowns : at HTMLDog
67. Tabtastic : Gavin Kistner.
68. Tabs Tutorial at BrainJar
69. Taming Lists : at A List Apart
70. Turning a List into a Navigation Bar : at 456BereaStreet
71. Ultimate css only dropdown menu : at CSS Play

Fonte: http://www.econsultant.com

Bordas com imagens usando CSS

Veja no exemplo abaixo como é simples colocar nas bordas imagens.

Exemplo:

CSS:

 .Imagen_Dot{
padding:6px;
background:url(dotted.gif) repeat;
}

HTML:

 <p align=”center” >
<img src=”imagen.jpg” width=”200″ height=”133″ class=”Imagen_Dot”>
</p>

Mais exemplos

Fonte: www.webintenta.com

Becoming Insane (Album Mix)

Mudar classe CSS de um elemento com DOM

Veja como é simples fazer a mundança de classe de um elemento com auxílo do DOM.

Resultado:

Javascript:

function CambiarEstilo(id) {
var elemento = document.getElementById(id);
if (elemento.className == “aspecto1″) {
elemento.className = “aspecto2″;
}
else {
elemento.className = “aspecto1″;
}
}

CSS:

.aspecto1 {
border: 1px solid #CCC;
padding: 10px 5px 6px 5px;
background-color: #E4E4E4;
color: #666;
}
.aspecto2{
background-color:#F1D59E;
border: #F2BE84 5px solid;
color: #666;
font-family: “Lucida Sans Unicode”, Verdana, Arial, Georgia;
font-size: 12px;
width:200px;
padding:10px;
}

HTML:

 <p>
<a href=”javascript:CambiarEstilo(‘EjCambioEstilo’)”>Mudar</a>
</p>
<div id=”EjCambioEstilo” class=”aspecto1″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus
mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce
pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus
a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar
vitae, nibh. </p>
</div>

Código completo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”><head><title>CAMBIAR ESTILO 2</title>

<style type=”text/css”>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #FFFFFF;
margin-left: 100px;
margin-right: 100px;
}
.aspecto1 {
border: 1px solid #CCC;
padding: 10px 5px 6px 5px;
background-color: #E4E4E4;
color: #666;
}
.aspecto2{
background-color:#F1D59E;
border: #F2BE84 5px solid;
color: #666;
font-family: “Lucida Sans Unicode”, Verdana, Arial, Georgia;
font-size: 12px;
width:200px;
padding:10px;
}
</style>
<script language=”javascript”>
function CambiarEstilo(id) {
var elemento = document.getElementById(id);
if (elemento.className == “aspecto1″) {
elemento.className = “aspecto2″;
}
else {
elemento.className = “aspecto1″;
}
}
</script></head><body>
<p><a href=”javascript:CambiarEstilo(‘EjCambioEstilo’)”>Mudar</a></p>
<div id=”EjCambioEstilo” class=”aspecto1″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus
mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce
pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus
a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar
vitae, nibh. </p>
</div>
</body></html>

Fonte: www.webintenta.com

Mudar o layout com CSS

Segue abaixo o esquema pra mudar o layout de sua página através do uso de CSS.

Código html:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”><head><title>Mudar Layout</title>

<link href=”CambiarEstilo_arquivos/css1.css” rel=”stylesheet” type=”text/css” title=”css1“>
<link href=”CambiarEstilo_arquivos/css2.css” rel=”alternate stylesheet” type=”text/css” title=”css2“>
<script language=”javascript”>
function EstablecerCSS(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 &&
a.getAttribute(“title”)) {
a.disabled = true;
if(a.getAttribute(“title”) == title)
a.disabled = false;
}
}
}
</script>
</head><body>
<div id=”contenedor”>
<div id=”cabecera”>
<span class=”WebTitulo”>Título da Página </span>
</div>

<div id=”contenido”>
<div id=”enlaces”>
<a href=”javascript:EstablecerCSS(‘css1‘);”>Estilo 1</a>
<a href=”javascript:EstablecerCSS(‘css2‘);”>Estilo 2</a>
</div>
<h1>Título do artigo</h1>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit
amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer
adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem
ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit
amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer
adipiscing …Lorem ipsum dolor sit amet, consectetuer adipisc