Blog do TreinaWeb
Dicas, notícias e informações sobre cursos, programação, webstandards e desenvolvimento web.Posts com a Tag ‘CSS’
-
10 mitos da incompatibilidade nos navegadores para HTML/CSS/JS
28 de November de 2011
Quem anda de cabresto, sempre tende a olhar para baixo, excluindo a curiosidade de olhar o mundo exterior ao seu redor, depois que eu saltei da minha zona de conforto a 10 meses atrás, eu tinha a notória sensação de que eu descobria coisas novas a cada segundo, e as lembranças da zona de conforto me acomodaram mal, muito mal por sinal.
Uma das coisas que te deixam infeliz é a tal preguiça de inovar, justamente por que confortavelmente você acha que nunca precisa mudar, e nessa migração constante deparamos com mitos criados ou expurgados por quem não dá a mínima atenção em inovar e ser competitivo.Quando eu comecei a estudar HTML5/CSS3/JS, eu tinha aquela sensação de mal estar adquirido, achando que nada prestava, tudo precisava melhorar, CSS então era a brincadeira de estica e puxa,Deus nos acuda!
Ao passar das semanas eu fui percebendo que os navegadores evoluíram bastante, frameworks e desenvolvedores de padrões web colaboraram para essas evoluções e no final percebi que quem estava atrasado na história era eu mesmo.
Então somei o que eu achava mito e decidi escrever esse post para você abrir sua mente e se liberar de seus medos.
10 Mitos da incompatibilidade nos navegadores
MITO 1 – HTML e CSS é feito para fazer sites e não sistemas.
Resposta: Então você nunca usou o Hotmail, Gmail, adWords, adSense na vida, você nunca usou itaú bankline, Bradesco on-line e por ai vai. o HTML e CSS é poli valente, funciona para tudo.
MITO 2 – Tenho que fazer vários ifs e elses para suportar N navegadores
Resposta: Não há necessidade, já que existem N frameworks no mercado que fazem a manipulação perfeita entre engines de navegadores, grande parte dos navegadores usam webkit/gecko e o único a usar um engine diferente é o IE com seu msie, porém na última versão 8, já vem com suporte a padrões web.
Frameworks que podem te ajudar a quebrar esse mito: JQuery, MooTools, EXT Js, Script.aculo.us, ProtoType.
Ou seja, alternativas é o que não falta para esse mito, já que todos peleijam em achar que irá voltar a época das cavernas por manipular DOM de cada engine de navegador.
MITO 3 – HTML5 é incompatível com navegadores
Respota: Desde quando HTML é incompatível com navegadores? HTML5 nada mais é que uma nova versão do HTML, existem alguns recursos como WebGL, Canvas, Audio, Video, codecs de audio e video que são específicos de cada navegador, que ao total 93% de todos os recursos que você vai usar em um único projeto é compatível com todos os navegadores.
Caso você ainda tenha problemas em achar que o HTML5 pode não rodar perfeitamente no IE7,8 você pode usar bibliotecas já prontas para isso. Uma delas inclusive é amplamente utilizada, a Modernizr.
MITO 4 – Não posso usar MVC em uma aplicação web feita em Javascript e HTML
Resposta : Mito detonado, no bom estilo caçadores de mitos, desde que javascript é javascript, e tudo é Objeto. Então eu manipulo qualquer objeto aplicando qualquer padrão existente, Aconselho você usar esse slides para te influenciar a pensar diferente.
MITO 5 – Não consigo criar interfaces com facilidade como no Flex
Resposta: É por que você não conhece o JQuery UI, YUI, Prototype UI, UKI, MochaUI, Livepipe UI, Alloy UI e GWT. Ou seja, alternativas para você criar interfaces não faltam.MITO 6 – Aplicações Web feitas em HTML 5 e CSS3 não são cross-plataforma.
Resposta: Navegadores hoje são cross-plataformas, rodam no Linux, MAC, Windows, ios, Android e Windows Phone. Se sua aplicação fica na caixinha de areia do navegador então ela também será cross-plataforma, não tendo a necessidade absoluta de portar seu aplicativo para diferentes plataformas. Assim como no Flash Player ser cross-plataforma, é por que ele tira proveito dos navegadores.
MITO 7 – Aplicações feitas em HTML5 e CSS3 são lentas
Resposta: Uma vez que sua aplicação pronta, ela trafega muito mais rápido para o navegador do usuário do que seu SWF, já que não é compilável, é apenas lida.
O Flex compila o que você escreve em um SWF, esse SWF é binário, como uma imagem em JPEG ou PNG é. A diferença é que uma vez baixado ele se torna mais rápido por que não é interpretado. Já com HTML, CSS e JS ele é interpretado sempre que você manipula.A grande vantagem está no tráfego de dados e na re-utilização do sistema, á que por padrão ele tem cache ativo. roda muito mais macio no navegador e não depende de plug-in.
MITO 8 – Em aplicações Web eu não consigo fazer Sockets, usar o AMF
Resposta: Você consegue sim, WebSockets são novidade, são feitos em js, veja o Node.JS. E AMF conheça o AMFJs.
MITO 9 – As IDE atuais são péssimas, produtividade ZERO
Resposta: Mito detonado também, existem N IDEs excelentes uma delas é as IDEs feitas pela JetBrains, compatíveis com os padrões do mercado e cheia de recursos, outras tão boas são para o Eclipse como o Aptana. E claro o Dreamweaver CS5.
MITO 10 – Meus aplicativos são re-escritos sempre que for criar uma versão mobile deles.
Resposta: Existem 2 posibilidades de você usar HTML, CSS e JS em aplicações Móveis, uma é usar os Media-Queries de CSS, fazendo o layout de suas aplicações responsivas. Ou criando um aplicativo específico para Mobile usando o mesmo HTML 5 e CSS3 feito para versão Web/Desktop.
Então se você chegou até aqui, é sinal que alguns mitos já passaram por sua cabeça e a dúvida pairava no ar. A minha sugestão é, ajude outras pessoas a se libertar desses mitos.
Fonte: Igor Costa.
-
Acessibilidade web com CSS Parte 2
23 de June de 2009
Continuaremos agora com a nossa lista de técnicas CSS que podem ser aplicadas para tornar o seu site mais acessível. Na última lista fizemos 10 itens, então hoje, começaremos pelo item 11:
11 – Utilize as marcações apropriadas para as listas e itens de listas: Empregue as tags UL e OL para criar as listas, isto facilita a interpretação da página.
12 – Utilize metadata para acrescentar informações semânticas às páginas: Apesar de ainda ser muito recente, a nova versão do HTML, visa tornar a internet mais semântica, com isto, será mais fácil contextualizar a informação, ajudando na compreensão da página.
13 – Não utilize tabelas para controlar a apresentação do layout: Não utilize tabela para posicionamento dos elementos da página, só use tabela se ela for fazer algum sentido (dados tabulados), caso contrário utilize outra alternativa (normalmente divs).
14 – Forneça opções em outros idiomas: Este é um ponto difícil, mas se for possível disponibilize a opção de mais um idioma, de preferência ao idioma inglês, já que é o idioma mais falado no mundo dos negócios/internet.
15 – Forneça outra opção de leitura: Alguns usuários possuem dificuldade em ler conteúdos on-line, então ofereça a opção imprimir o conteúdo, e/ou uma opção de exportar/converter para pdf.
Com estes 5 itens, terminamos nossas dicas de acessibilidade com CSS, nos próximos artigos traremos mais dicas de acessibilidade, com outras tecnologias.
Até amanhã!
-
Acessibilidade web com CSS
10 de June de 2009
Continuando nossa serie sobre acessibilidade web, hoje mostraremos técnicas que podem ser aplicadas ao CSS para facilitar a vida dos usuários com dificuldade.
Como são vários pontos vamos enumerar em tópicos:
1 - Crie um estilo de apresentação consistente em todas as páginas: Tente padronizar todas as páginas do site, crie o mínimo de folhas de estilos e use folhas de estilo externas, evite criar folhas de estilo in-line, assim facilita também a manutenção do site.2 – Evite definições que estão fora dos padrões da W3C: Para garantir que o site não terá nenhuma incompatibilidade, não utilize regras, comandos ou técnicas que já estão em desuso.
3 – Use unidade de medidas relativas: Evite usar unidade de medida fixas, como cm e pt. Dê preferência pelas unidades em e %, só utilize medidas fixas, para elementos que possuem medidas fixas, como imagens.
4 – Evite usar imagens: Se for possível, substitua as imagens por texto, quando isto não for possível, forneça uma explicação da imagem em forma de texto, através da tag “alt” do elementos img, por exemplo: <img src=”http://www.treinaweb.com.br/images/treinaweb_elearning2.gif” alt=”Logotipo do site TreinaWeb” />
5 - Forneça o site sem html: No momento do desenvolvimento do site, verifique se ele permanece legível, mesmo que sem o CSS da página, para facilitar os usuários que utilizam browsers sem suporte ao CSS.
6 - Evite utilizar apenas um fonte de letra: Sempre forneça mais de uma opção de fonte, bem como evite utilizar fontes em desuso ou pouco utilizadas.
7 - Crie um estilo de texto simples: Evite utilizar efeitos no texto, como: efeitos de sombra, “piscante”. Caso tenha que aplicar os efeitos no texto, sempre forneça uma forma de “desligar este efeitos”.
8 - Sempre utilize as folhas de estilo para tabular o texto: Nunca tabule o texto “à mão”, utilize os elementos do CSS para tabular o texto, como: word-spacing, text-indent, write-spancing.
9 – Cuidado ao utilizar cores nos textos: Certifique-se que toda informação transmitida pela cor esteja disponível também sem a cor, por exemplo, mediante contexto ou por marcadores.
10 – Sempre teste seu site em um browser somente texto (o mesmo que os leitores de tela utilizam). O Lynx é um dos mais famosos. Se não quiser instalá-lo, existem alguns emuladores, como o LynxView.
Por enquanto é isto. No próximo artigo traremos mais dicas de como utilizar o CSS para tornar o site mais acessível.
Até a próxima!