kraudio

Archive for Fevereiro 2007

DIFERENÇAS ENTRE VISIBILITY:HIDDEN E DISPLAY:NONE

In CSS, CSS e XHTML, GALERIA CSS, Webstandards, w3c on Quarta-feira, Fevereiro 28, 2007 at 3:45 am

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

In GNU/Linux & OpenSource, K/X/E/Ubuntu, nautilus on Terça-feira, Fevereiro 27, 2007 at 4:27 pm

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

In GNU/Linux & OpenSource, K/X/E/Ubuntu, nautilus on Terça-feira, Fevereiro 27, 2007 at 4:25 pm

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

In Apache, MySQL, PHP, Pen-drive on Terça-feira, Fevereiro 27, 2007 at 3:45 am

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:

Executável do Wos

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:

Tela principal do Wos

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:

Página padrão do Wos

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:

Pasta www

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

Pasta exe_1

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:

Teste com o PHP

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

Salvando o arquivo

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:

Informações do PHP

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?

In Webstandards on Segunda-feira, Fevereiro 26, 2007 at 7:31 pm

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

In CSS, CSS e XHTML, Diversos, GALERIA CSS, Usabilidade, Web Design, Webstandards, w3c on Segunda-feira, Fevereiro 26, 2007 at 7:26 pm

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 lendo.gif

Português
Imagem do IPB
Usabilidade na Web
Mais informações e onde comprar

Imagem do IPB
Não me faça pensar
Mais informações e onde comprar

Imagem do IPB
Homepage: Usabilidade: 50 Websites Desconstruídos
Mais informações e onde comprar

Imagem do IPB
Projetando Websites
Mais informações e onde comprar

Imagem do IPB
Design para Quem Não é Designer
Mais informações e onde comprar

Imagem do IPB
Design e avaliação de interfaces humano-computador
Mais informações

Imagem do IPB
Design para a Internet: Projetando a Experiência Perfeita
Mais informações e onde comprar

Imagem do IPB
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

In Dicas, GNU/Linux & OpenSource, K/X/E/Ubuntu on Quinta-feira, Fevereiro 22, 2007 at 3:34 pm

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

In Dicas, GNU/Linux & OpenSource, K/X/E/Ubuntu on Quinta-feira, Fevereiro 22, 2007 at 3:30 pm

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

In Dicas, GNU/Linux & OpenSource, K/X/E/Ubuntu on Quinta-feira, Fevereiro 22, 2007 at 3:14 pm

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

In Dicas on Quinta-feira, Fevereiro 22, 2007 at 2:56 pm

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

In CSS, CSS e XHTML, Web Design, Webstandards, html, w3c on Quinta-feira, Fevereiro 22, 2007 at 1:48 pm

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

In Diversos, Musica, Videos on Sábado, Fevereiro 10, 2007 at 12:43 pm

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

In CSS, CSS e XHTML, Dicas on Sexta-Feira, Fevereiro 9, 2007 at 4:42 pm

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:
legend.png

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

In Blogroll on Sexta-Feira, Fevereiro 9, 2007 at 4:36 pm

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:
fileselect.png

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

In CSS, CSS e XHTML, Dicas on Sexta-Feira, Fevereiro 9, 2007 at 4:32 pm

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:
fieldset.png

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

In CSS, CSS e XHTML, Dicas, Usabilidade on Sexta-Feira, Fevereiro 9, 2007 at 4:24 pm

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:
formulario.png

Fonte: http://www.webintenta.com

Layout-o-Matic

In CSS, CSS e XHTML on Sexta-Feira, Fevereiro 9, 2007 at 4:17 pm

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

In CSS, CSS e XHTML, Dicas, GALERIA CSS on Sexta-Feira, Fevereiro 9, 2007 at 3:51 pm

Imagem de algumas tabelas
Tabelas
Neste site existe existe varias estilos para tabelas, vale a pena conferir.

Fazendo Menu Horizontal com CSS

In CSS, CSS e XHTML, Dicas on Sexta-Feira, Fevereiro 9, 2007 at 3:34 pm

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

In CSS, CSS e XHTML, Dicas on Sexta-Feira, Fevereiro 9, 2007 at 3:25 pm

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

In CSS, CSS e XHTML, Dicas, GALERIA CSS on Sexta-Feira, Fevereiro 9, 2007 at 3:19 pm

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

In CSS, CSS e XHTML, Dicas, Javascript on Sexta-Feira, Fevereiro 9, 2007 at 3:14 pm

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

In CSS, CSS e XHTML, Dicas, GALERIA CSS, Javascript on Sexta-Feira, Fevereiro 9, 2007 at 3:00 pm

Várias feramentas para se trabalhar com CSS

CSS-based design galleries

CSS-based Layout:

CSS-based Boxes:

CSS-based Menus, Lists and Navigation:

CSS and Form Elements:

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.
  • My Favorite 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
  • My Favorite 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 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.
  • My Favorite 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.
  • My Favorite 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.
  • My Favorite 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.
  • My Favorite 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:

Fonte: http://www.soxiam.com/Notes/CSSTools

Top 71 Abas de navegação em CSS

In CSS, CSS e XHTML, Dicas, GALERIA CSS on Sexta-Feira, Fevereiro 9, 2007 at 2:57 pm

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

In CSS, CSS e XHTML, GALERIA CSS on Sexta-Feira, Fevereiro 9, 2007 at 2:07 pm

Veja no exemplo abaixo como é simples colocar nas bordas imagens.

Exemplo:
bordas.png

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)

In psytrance on Sexta-Feira, Fevereiro 9, 2007 at 1:44 pm

Mudar classe CSS de um elemento com DOM

In CSS, CSS e XHTML, Dicas, Javascript on Sexta-Feira, Fevereiro 9, 2007 at 1:37 pm

Veja como é simples fazer a mundança de classe de um elemento com auxílo do DOM.

Resultado:
Aspectos
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

In CSS, CSS e XHTML, Dicas, Web Design on Sexta-Feira, Fevereiro 9, 2007 at 1:18 pm

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 adipiscing …</p>
</div>

<div id=”navegacion”>
<h2>Categorias</h2>
<ul>
<li><a href=”#”>Recursos</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>PHP</a></li>
<li><a href=”#”>ASP</a></li>
<li><a href=”#”>AJAX</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>Ilustrações</a></li>
<li><a href=”#”>Fotografia</a></li>
</ul>
<h2>Arquivo</h2>
<ul>
<li><a href=”#”>Maio de 2007</a></li>
<li><a href=”#”>Abril de 2007</a></li>
<li><a href=”#”>Março de 2007</a></li>
<li><a href=”#”>Fevereiro de 2007</a></li>
</ul>
</div>
</div>
</body></html>

Código CSS1:

/* ————————–
GENERAL
—————————-*/
body,html {
min-height:100%;
height:100%;
}
body {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#enlaces { margin-top:20px}
#enlaces a{
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #993399;
background-color:#FAE1FB;
padding:5px;
margin:5px;
}
#contenedor {
position: relative;
width: 760px;
border-right: 1px solid #E4E4E4;
height:100%;
}
/* ————————–
CABECERA
—————————-*/
#cabecera {
border-top: 6px solid #2A4F6F;
border-bottom: 1px dotted #B2BCC6;
height: 4em;
}
#cabecera .WebTitulo {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #666;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#cabecera .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
/* ————————–
NAVEGACION
—————————-*/
#navegacion {
position: absolute;
top: 6em;
left: 1em;
width: 14em;
}
#navegacion ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#navegacion li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#navegacion a {
text-decoration: none;
color: #2A4F6F;
}
#navegacion h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #2A4F6F;
border-bottom: 1px dotted #cccccc;
}
/* ————————–
CONTENIDO
—————————-*/
#contenido {
margin-left: 17em;
margin-right: 2em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#contenido p {
font-size: 80%;
line-height: 1.6em;
}

Código CSS2:

/* ————————–
GENERAL
—————————-*/
body,html {
min-height:100%;
height:100%;
}
body {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#enlaces { margin-top:20px}
#enlaces a{
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #993399;
background-color:#FAE1FB;
padding:5px;
margin:5px;
}
#contenedor {
position: relative;
width: 760px;
border-right: 1px solid #E4E4E4;
border-left: 1px solid #E4E4E4;
height:100%;
margin-right: auto;
margin-left: auto;
background-color:#E2E2E2;
}
/* ————————–
CABECERA
—————————-*/
#cabecera {
border-top: 6px solid #2A4F6F;
border-bottom: 1px dotted #B2BCC6;
height: 4em;
}
#cabecera .WebTitulo {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #666;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#cabecera .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
/* ————————–
NAVEGACION
—————————-*/
#navegacion {
position: absolute;
top: 5em;
right: 1em;
width: 12em;
background-color:#FF3300;
}
#navegacion ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#navegacion li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#navegacion a {
text-decoration: none;
color: #FFF;
font-weight:bold;
}
#navegacion h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #B7C6F1;
border-bottom: 1px dotted #cccccc;
}
/* ————————–
CONTENIDO
—————————-*/
#contenido {
margin-left: 2em;
margin-right: 14em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#contenido p {
font-size: 80%;
line-height: 1.6em;
}

Resultado:
mudanca.png

Notícia completa
Fonte: www.webintenta.com

Estilos de botões com CSS

In CSS, CSS e XHTML, Dicas on Sexta-Feira, Fevereiro 9, 2007 at 12:50 pm

Código html:
<button>Button</button>

CSS:

  1. #el01 {width:100%} /* Width */
  2. #el02 { /* Text and background colour, blue on light gray */
  3. color:#00f;
  4. background-color:#ddd
  5. }
  6. #el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
  7. #el04 {border-width:6px} /* Border width */
  8. #el05 {border:2px dotted #00f} /* Border width, style and colour */
  9. #el06 {border:none} /* No border */
  10. #el07 {font-family:"Courier New",Courier} /* Different font */
  11. #el08 {font-size:2em} /* Bigger text */
  12. #el09 {font-size:0.5em} /* Smaller text */
  13. #el10 {font-weight:bold} /* Bold text */
  14. #el11 {padding:1em} /* Increase padding */
  15. #el12 {text-align:right} /* Change text alignment */

Resultado:

Botão CSS

Resultado em outros OS:

  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

Notícia completa
Fonte: 456 Berea Street Home

Jack Chan’s Street Fighter

In Diversos, Humor, Videos on Quinta-feira, Fevereiro 8, 2007 at 4:20 pm

Alguém ai lembra de Street Fighter? Uns do jogos mais famosos de luta que ate hoje tem milhares de fãs espalhados por ai.

Este vídeo não é novo, mas conta com a participação de um ator muito bom, Jack Chan.

O rei do D´oh!

In Humor on Quarta-feira, Fevereiro 7, 2007 at 3:45 pm

Frases do Homer Simpson:

“Existem três frases curtas que levarão sua vida adiante: ‘Não diga que fui eu!’, ‘Oh, boa idéia chefe!’ e ‘Já estava assim quando cheguei.’”

“Operador! Me dê o número do 911!”

“Eu não sou normalmente alguém que ora, mas se você estiver aí em cima, por favor me salve Superman.”

“Filho, quando você participa de eventos esportivos, não importa vencer ou perder: É de quão bêbado você fica.”

” Eu não sou um cara mau! Eu trabalho duro e amo meus filhos.Então porquê eu deveria desperdiçar meio domingo ouvindo sobre como eu vou para o inferno?”

“Pai você fez um monte de coisas maravilhosas, mas você é um cara muito velho, e gente muito velha é inútil.”

“Bart, com $10.000 nós seremos milionários! Nós poderíamos comprar todo tipo de coisas úteis como…Amor!”
“Você pode ter todo o dinheiro do mundo, mas há algo que jamais poderá comprar: um dinossauro.”

“Bom, esse quadro realmente mostra aquilo que parece ser.”

“Ora, Marge, se deus não quisesse que a gente comesse na igreja, não teria colocado a gula como pecado…”

“Eu sei que eu não tenho sido um bom cristão, geralmente quando você está no seu bla bla bla eu estou desenhando ou dispindo mentalmente as paroquianas, mas me empresta U$40,000?”

“Por que eu tive que nascer pai?”

“olha aqui seu robô idiota ninguém acaba com as férias da minha família…… só eu, ou talvez meu garoto..!!!

“Ele já sabe como gosto do meu DRINK…. Com muito álcool!”

” Álcool… A causa e solução de todos os problemas.”

“Cala a boca Pensamento, ou te enfio uma faca.””

“marge: podemos ter outro bebê? Homer: Não!! ainda nao perdi o peso que ganhei com o ultimo…”

” Deus, se quiseres que eu coma as oferendas não se manifeste de nenhuma maneira… … Tua vontade será feita…”

“Se alguma coisa está dificil de ser feita, é porque não é para ser feita”

“(no brasil dentro de um táxi abordado por um sequestrador)-isso aqui é um sequestro!! Homer:então eu não prciso pagar a corrida? iiahhuuuu!!!

“É melhor ver coisas do que fazer coisas.”

“A iniciativa é o primeiro passo para o fracasso”

“As respostas para todos os problemas da vida não estão no fundo de uma garrafa… estão na TV!”

“- Bart, existem 3 jeitos de se fazer as coisas: o jeito certo, o errado e o jeito Maximo Poder” “- Mas esse não é o jeito errado?” “- É, só que mais rápido”

“Por favor, não me coma! Eu tenho mulher e filhos. Coma eles!”

Homer: “Certo cérebro, eu nao gosto de você e nem você de mim então faça tudo certo pelo menos uma vez para que eu possa continuar te matando com cerveja, certo?” Cérebro: “Negócio fechado!”

Lisa: “Pai, você matou o zumbi Flanders!!!” Homer: “Ele era um zumbi?!”

“Eu não estava mentindo! Estava escrevendo ficção com a boca.”

“aaaaaahh marge, eu tive um sonho horrível em que todos fomos transformados em terríveis criaturas rosadas com cinco dedos em cada mão!!!”

(recebendo a conta de telefone)
Homer: Burkina Fasso? Zona de Litígio? Quem ligou pra esses lugares?
Cérebro: Silêncio! Pode ter sido você! Eu não me lembro!
Homer: Ahh, eu vou perguntar pra Marge.
Cérebro: Nãão! Pra quê envergonhar nós dois? É só assinar um cheque que eu libero umas endorfinas!
(Homer assina o tal cheque)
Homer: Ahhh…

Bart: Olha, só pra vocês não ficarem sabendo por outras pessoas, eu cometi uma fraude na Austrália.
Homer: Ah, mas isso não é motivo pra ficar na frente da TV!

Homer é o detentor do recorde mundial de beber cerveja, e sobre isso ele declarou: “…em uma competição de beber cerveja não importa se você ganha ou perde… o que importa é o quão bebado você fica…”. Sobre esse fato, se sabe também que ele não bebe outra cerveja a não ser Duff.

Fonte: www.marceloantunes.com

Navegar é Preciso

In Usabilidade on Quarta-feira, Fevereiro 7, 2007 at 12:04 pm

Tutorial muito bom sobre navegação, neste tutorial ele comenta sobre o livro “Não me Faça Pensar” do Steve Krug, pra quem tiver oportunidae, compre, leia, empreste….

Autor: Rochester Oliveira
Fonte: MXStudio.


Navegar é preciso

Definindo as coisas
Há quem não dê a mínima importância à navegabilidade do site, apesar desse ser um fator fundamental e primário. Como eu posso alcançar meu objetivo em um site se eu não consigo navegar nele, se eu me perco facilmente? Ou pior, se eu nem sei onde está o menu? Ou se eu não tenho algum campo de busca (ou mapa de site, para os menores).

O pior erro que se pode cometer em um projeto de um site é se esquecer do usuário final. O usuário “comum” não consegue “se virar” como um “usuário avançado” (que é o grupo que se encaixam os desenvolvedores). Ele sequer está interessado em “aprender” a utilizar o seu site, pois sempre há outro site há 2 links dali.

Então é importante uma navegação clara, segura, e que cumpra os objetivos dos usuários. Parece simples e óbvio demais né? Pois então, Fazer o simples é sempre mais difícil ;D

Objetivos da navegação

Entre ajudar a encontrar o que procuramos e nos informar onde estamos, a navegação também tem várias outras funções:

  • Ela dá algo ao qual nos apoiamos – Sempre há opções de retornar, e também sempre há informações de onde estamos em uma navegação bem projetada.
  • Ela nos diz o que existe no site – Ela deixa a hierarquia do site parcialmente visível, ou seja, dá uma idéia do conteúdo que há no site.
  • Ela diz como usar o site – Em uma navegação bem projetada é dito implicitamente onde devemos começar, ou quais são os locais onde podemos encontrar o que queremos, ou mesmo pode mostrar as ferramentas e opções que há no site .
  • Ela dá confiança nas pessoas que criaram o site - A confiança que um site gera é o que pode decidir se o usuário permanece ou não nele. Se o usuário não confia em quem criou, não vai pensar em navegar muito por ali.

Conceitos básicos

  • Habilite o “voltar” do navegador
    Esse é, com certeza, o botão mais clicado pelos usuários. Por isso tome cuidado quando algum recurso do seu site o desabilita, isso pode deixar o usuário confuso, ou frustrado (por exemplo, se ele navegou muito até chegar em um ponto, e tenta voltar apenas um nível e acaba caindo na home) e resultar em uma perda grande para seu site.
  • A home é o melhor lugar!
    Por mais perdido que o usuário esteja em sua navegação, se você deixar fácil uma “volta ao início” as chances dele tentar recomeçar (invés de sair) são muito maiores do que se não existisse. Um bom recurso é utilizar a identificação visual do site (a logo, alguma marca, ou nome qualquer) como um link para a home, além do link sempre presente no menu principal.
  • Migalhas de pão \ Indicadores “Você está aqui”
    Os indicadores “Você está aqui” quebram a sensação de perdido no site, por exemplo, se você entrar no site da Amazon facilmente saberá onde está através dos avisos visuais. No link que foi colocado atrás, identificamos o título do site (Amazon) a seção “books” e o subtítulo “BestSellers”, ou seja através de identificações visuais o usuário encontrou onde ele está na hierarquia do site.Daniel de Paola na Coluna de Usabilidade já falou sobre as migalhas de pão, que são links que mostram de onde o usuário veio até chegar no ponto que ele está. A grande diferença entre esses dois indicadores é que os indicadores mostram onde você está na hierarquia geral, já as migalhas de pão mostram apenas o caminho que você faz da home a página atual (seria como “olhar um mapa” X “seguir indicações” . As indicações são mais precisas, mas com o mapa você aprende mais).
  • Cuidado com a profundidade
    Essa é uma discussão de tempos entre os projetistas. Eu pessoalmente prefiro (quando possível, claro) uma hierarquia mais larga do que uma profunda. Uma hierarquia larga resulta em menos cliques, mas é necessário que cada clique esteja certo (vide trecho abaixo, sobre ambigüidade de links), já em uma hierarquia profunda, há menos opções por nível, mas há uma necessidade de mais cliques para se chegar ao mesmo lugar.
  • Não à ambigüidade em links
    Já dizia o tio Steve Krug “Não importa quantas vezes eu tenha que clicar desde que cada clique seja uma escolha óbvia e não ambígua”. Mesmo que seja necessária uma profundidade maior de links, eles levem ao lugar que o usuário espera que levem. Um clássico é do produto ou serviço que alguém tenta comprar no escritório em casa, e se depara com as opções “Casa” e “Escritório” separadas. Isso obriga o usuário a pensar no que o desenvolvedor acha que se classifica o produto, e um erro significa perda de tempo e de paciência com o site.
  • Dê importância aos níveis mais baixos de navegação
    Uma tendência que temos ao realizar um projeto é de não nos preocupar muito com os níveis mais baixos de navegação. Algumas vezes porque achamos que até chegar lá, o usuário já se acostumou com o site, outras porque achamos que o número de pessoas que chegarão aos niveis mais baixos são tão pequenos que não justificam um “trabalho” com esses níveis. Pois não é bem assim. Muitas pessoas chegam aos sites através de buscas, ou seja, já caem no meio do site, e se a navegação naquele ponto for muito confusa, provavelmente ele desistirá do site.

Considerações finais
Depois de todos os conceitos citados é hora de fazer uma auto análise “Será que o site que eu criei tem uma boa navegabilidade?”. Esses tópicos citados são um bom ponto de partida para se analisar, e ir aos poucos melhorando, e adaptando às necessidades do usuário.

Quem já leu “Não me Faça Pensar” do já citado Steve Krug, deve estar familiarizado com estes tópicos, que são muito bem falados no livro. Então recomendo a leitura, e de preferência com um bloquinho ao lado, pois há muito conteúdo interessante que se pode abordar depois, e discutir com outros profissionais.

That’s All :)

Rochester Oliveira – Coluna de Usabilidade
Para qualquer dúvida ou sugestão:
Mande um e-mail para Rochester Oliveira – rochester@mxstudio.com.br
ou visite o fórum de Usabilidade do MXStudio

Como solucionar Pequenos Bugs em CSS

In CSS, CSS e XHTML, Dicas, Firefox, GALERIA CSS, Web Design, Webstandards, w3c on Segunda-feira, Fevereiro 5, 2007 at 12:14 pm

Artigo muito bom postado pelo Maurivan Luiz Padilha no site MXStudio.

Introdução
Em um mundo perfeito, poderíamos escrever CSS e funcionaria independente dos browsers perfeito. Mas nunca faltaram erros de digitação, navegadores “lindos” e também comportamentos desconhecidos que nos deixam confusos, e muitas vezes sem saber como começar a solucionar os problemas. Irei citar neste artigo alguns passos que podem seguir para eliminar “os bugs” em suas folhas de estilo.

O motivo mais óbvio para ocorrer um erro na página é um erro no código, Para verificar nosso código, podemos utilizar o famoso validador da W3C para checar tanto nosso html como nosso CSS. Uma maneira mais fácil e sensata de fazer é através do plugin Web Developer Tools para Mozilla/Firefox, ou então com a extensão de validação que permite você validar sua página sem a necessidade de estar conectado a rede mundial de computadores (internet)

Muitas vezes é difícil encontrar qual é o problema quando você está visualizando uma página completa, com uma folha de estilos extensa. Aconselho você então a pegar e copiar somente o html e o css que seja referente a seu problema em uma nova página, isto simplificará para você encontrar e solucionar seus problemas.

Pré-Requisitos

Vontade de aprender é considerado fundamental, aprender com os erros é essencial, e um cafézinho expresso para acompanhar :)

Objetivo

Aprender pequenos macetes que podem ser úteis em alguns casos, tais quais problemas com altura, largura, margin e padding.

Conteúdo
Examine seus elementos.
Para saber exatamente aonde está o problema, é muito útil inserir bordas de cores em seus elementos, o qual te facilitará perceber dimensões, margens e bordas, e caso seja detectado algum pequeno deslize no tamanho de uma div, pode ser rapidamente resolvido.

Estilos
Para checar que regras você está aplicando a seu elemento, o inspetor DOM do Mozilla Firefox pode ser muito útil.

* Inspetor DOM é uma ferramenta para analisar a estrutura do documento

Cheque para ver se o BUG não é conhecido.

Se já puder identificar exatamente qual é o problema, por exemplo; a div #conteudo se movimenta 3 pixels a esquerda no internet explorer 5.5, enquanto em outros navegadores continua intacta), busque na internet para ver se é um problema comum, no site “Position is everything”, por exemplo, tem uma lista muito completa de bugs que ocorrem no IE, Opera e Mozzila Firefox.

Se por ventura você não encontrar no “Position is everything”, você poderá encontrar em nosso fórum de CSS http://www.mxstudio.com.br/forum/index.php?showforum=7

Experimente!
Tente trocar os valores em sua folha de estilho, zerar, adicionar, para ver como afetam sua página. Pode ser útil colocar as margens e padding zeradas (padding:0; margin:0;).

É muito fácil de realizar alterações com o Notepad++ e com o plugin WebDeveloper Tools, para Mozilla Firefox, que lhe permite visualizar as alterações imediatamente.

Peça Ajuda!
Sempre há gente disposta a lhe ajudar aqui nos fóruns da MXSTUDIO, saiba sempre como explicar seu problema, e colocar um link com a sua página, ou então o codigo de sua página html e sua folha de estilhos para que facilite o trabalho de quem for lhe ajudar. Com certeza irá encontrar alguém disposto!

Agradecimentos
Para este artigo, eu gostaria de agradecer ao imuller que abriu a minha cabeça na introdução.
E também a meu amigo Felipe Nascimento Silva Pena (ecl), que me avisou de um erro ortográfico a ponto de ser corrigido.

Considerações Finais
Neste artigo está explicito alguns macetes para você resolver problemas básicos que podem ocorrer em sua folha de estilo, porém nem todo erro pode ser corrigido apenas com estes macetes!

Para saber mais:

W3C – The World Wide Web Consortium
http://www.w3.org/

Documentos W3C em Português!
http://www.amtechs.com/w3c/

CSS Bug Table
http://www.richinstyle.com/bugs/table.html

CSS contents and browser compatibility
http://www.quirksmode.org/css/contents.html

 

Autor: Maurivan Luiz Padilha – Colunista WEBSTANDARDS do Portal MXSTUDIO

Qualquer dúvida referente à webstandards, pode ser enviado um e-mail para maurivan@mxstudio.com.br ou acesse o nosso fórum!

Pequenas mundanças no Gmail

In gmail on Quinta-feira, Fevereiro 1, 2007 at 4:42 pm

Hoje quando viu ver meus e-mails gmail notei algumas pequenas mudanças que são:

  • Um novo menu com as opções:
    • Responder a todos
    • Encaminhar
    • Imprimir
    • Adicionar [nome do remetente] à lista de contatos
    • Excluir esta mensagem
    • Denunciar phishing
    • Mostrar original
    • Texto de mensagem truncado?
  •  E no rodapé da mensagem os botões, antes so texto agora contam com imagens no lado esquerdo do texto.

Imagem
ngmail.png