18Novembro2008
CSS: Resolvendo bugs no IE6
por: Alex Camillo em: CSS; Produção Web; XHTML; desenvolvimento web.
Quem nunca teve problemas desenvolvendo algum projeto usando o Internet Exolorer 6? Devido a sua falta de suporte aos padrões web, é quase inevitável não ter algum tipo de dor de cabeça. Mas é de extrema importância fazer com o que o projeto/site, seja visualisado da mesma forma em todos os browsers, digo: Internet Explorer 6, 7 e 8, Firefox 3.0.4, Safari 3.2, Opera 9.62 e Google Chrome. Mais uma coisa a ressaltar; Nunca devemos usar hacks, sempre há uma solução para se livrar de problemas. Em minha opnião é totalmente anti-profissional. Hacks são como o nosso famoso jeitinho brasileiro. Seja trabalhando como freelance ou em uma agência devemos sempre optar pelo profissionalismo, seguir padrões para que outros desenvolvedores saibam exatamente onde mexer caso precisem fazer alguma atualização no projeto.
Problemas mais comuns no IE6
-
- Margem Dupla;
- PNG transparente;
- Position:fixed;
- Margin: auto;
- Line-Height.
Quer a lista completa dos bugs no IE6?
Resolvendo os Bugs
Para começar, se você assim como eu gosta de se manter atualizado, com as versões mais recentes de seus browsers mas tem consciência de qua ainda é preciso checar seu trabalho no famigerado IE6, a solução é instalar multiplas versões do browser. Por algum motivo que ainda não descobri, o Multiple IE’s não funcionou com o Windows Vista, como em meu desktop, ainda utilizo o Windows XP, problema “resolvido”.
Biblioteca IE7.js
Uma maneira bastante simples de resolver todos os bugs do interner explorer 6 é utilizando a biblioteca IE7.js. A biblioteca faz com que o IE6 fique com a cara do IE7. Para tanto basta adcionar a condiconal baixo entra as tags <head></head> da sua página.
<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js” type=”text/javascript”></script>
<![endif]–>
Como nem tudo é perfeito, o problema na utilização da biblioteca ocorrerá se o usuário do site tiver desabilitado javascript em seu browser.
Reset.css
Iniciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser para evitar Alguns problemas é uma boa solução, já que, por padrão, todos os elementos HTML possuem um estilo incorporado. Atualmente utilizo a tecnica do Eric Meyer.
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;}
:focus{outline:0;}
body{background:white;line-height:1;color: black;}
ol, ul{list-style: none;}
table{border-collapse: separate;border-spacing:0;}
caption, th, td{font-weight: normal;text-align:left;}
blockquote:before, blockquote:after, q:before, q:after{content: “”;}
blockquote, q{quotes: “” “”;}
Apesar de todo trabalho que dá, e dá trabalho mesmo, nada melhor do que fazer um trabalho bem feito e entregar nosso código redondinho!
11Novembro2008
Enviar página para o twitter
por: Alex Camillo em: Wordpress; desenvolvimento web.
Aproveitando o gancho do último post. Compartilho aqui também como colocar um botão que permite o envio da página via Twitter. Leia o texto original.
<a href=”http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>” title=”envie esta página para o Twitter!” target=”_blank”>Compartilhe via Twitter</a>
10Novembro2008
Último tweet no seu blog
por: Alex Camillo em: Wordpress; desenvolvimento web.
O blog vem passando por algumas modificações. O layout modificou um pouco, ainda estou procurando alguns plugins. Nesta procura achei um tutorial que nos ensina s colcar seu último post no twitter. Como o twitter é uma ótima ferramenta para networking, e atualmente tem mais de sete milhões de usuários, achei uma boa idéia colocar o código aqui. Leia o texto original. Enjoy!
<?php
// Nome de usuário.
$username = “NomedeUsuario”;// Prefix - Podemos colocar algum texto aqui .
// (HTML pode ser usado, desde que seja utilizado com barra: por exemplo href=\”link.html\”)
$prefix = “<h2>Algum título aqui</h2>”;// Suffix - Algum texto para colocar depois. (A mesma regra do prefix.)
$suffix = “”;$feed = “http://search.twitter.com/search.atom?q=from:” . $username . “&rpp=1″;
function parse_feed($feed) {
$stepOne = explode(”<content type=\”html\”>”, $feed);
$stepTwo = explode(”</content>”, $stepOne[1]);
$tweet = $stepTwo[0];
$tweet = str_replace(”<”, “<”, $tweet);
$tweet = str_replace(”>”, “>”, $tweet);
return $tweet;
}$twitterFeed = file_get_contents($feed);
echo stripslashes($prefix) . parse_feed($twitterFeed) . stripslashes($suffix);
?>
31Julho2008
Heurística de Shneiderman
por: Alex Camillo em: Usabilidade.
Bill Shneiderman é professor in the Department of Computer Science na
University of Maryland.
O objetivo principal destas recomendações é orientar a avaliação de sites e promovendo assim sua usabilidade, tornando-os mais fácil e rápido o acesso a informações disponíveis em portais.
1 Busca Pela Consistência
Usar sempre a mesma terminologia e a mesma localização de elementos comuns nas páginas de conteúdo, nas páginas de ajuda ao usuário e nas mensagens de erro.
2 Atalhos
Juntamente com oi aumento do uso, aumenta-se o desejo do usuário de reduzir o número de cliques e aumenta o desejo de mais interação. Abreviações, teclas de atalho são de tamanha ajuda a um usuário experiente.
3 Feedback
Para cada ação o sistema deve fornecer um feedback, sendo que para pequenas ações a resposta pode ser modesta, já para ações maiores a resposta tem que ser substancial.
Começo, meio e fim
Sequências de ações devem ser organizadas de tal forma que tenham um começo, meio e fim. Assim, ao final de cada ação o usuário terá um sentimento de dever cumprido e satisfação e deixando o caminho livre para se preparem para a próxima ação.
5 Prevenção de erros
Caso o erro aconteça, o sistema deve detectar e oferecer mecanismos compreensíveis para lidar com o erro.
6 Desfazer erros
Permitir que o usuário desfaça algum erro durante uma ação. Isso também faz com que o usuário explore opções até então desconhecidas sem medo de errar.
7 Controle do Usuário
Os usuários de qualquer sistema interativo esperam deter controle sobre o sistema, fazendo com que este responda a suas solicitações e expectativas. Ações inesperadas do sistema, infindáveis seqüências de entrada de dados, incapacidade ou dificuldade em obter a informação necessária e incapacidade em produzir os resultados desejados contribuem para o aumento da ansiedade e da insatisfação do usuário
8 Reduzir carga de memória do usuário
capacidade da memória de curto termo é limitada. Conseqüentemente, quanto menos entradas, menor a probabilidade de cometer erros. Além disso, quanto mais sucintos forem os itens, menor será o tempo de leitura.
E, quanto mais numerosas e complexas forem as ações necessárias para se chegar a uma meta, a carga de trabalho aumentará e com ele a probabilidade de ocorrência de erros.
9Junho2008
WARAU
por: Alex Camillo em: Acessibilidade; CSS; Produção Web; XHTML.
O WARAU é um espaço de discussão de normas, diretrizes, técnicas e boas práticas para a criação de código Web acessível e usável. O nome WARAU é um acrônimo de Websites Atendendo a Requisitos de Acessibilidade e Usabilidade.
O WARAU é dirigido principalmente para mantenedores de websites que já tenham algum conhecimento de código Web (e.g., HTML, CSS, Javascript) e que queiram aprender como construir websites válidos, acessíveis e usáveis. No WARAU há espaço para discussão de temas que envolvam acessibilidade e usabilidade na Web, abrangendo desde ferramentas assistivas até diretrizes e padrões estabelecidos por organizações como o World Wide Web
Consortium (W3C).
Fonte: Acessibilidade Digital
Agradecimento: M. Cecília C. Baranauskas, Leonelo D. A. Almeida e Vagner F. de Santana IC & Nied - UNICAMP
Pots Relacionados
- Comente aqui
(Avalie este post)
Loading ...
Loading ...
Pots Relacionados