CAT | Webdesign
锘HTML 5, finalmente se tornar谩 um padr茫o do W3C
Sem coment谩rios · Post por Petter Rafael em Webdesign
Alguns browsers j谩 suportam as primeiras especifica莽玫es do HTML 5 h谩 anos, mas foi somente esta semana que o W3C publicou as especifica莽玫es do HTML 5, o que indica que a partir de agora ele se tornar谩 um padr茫o do W3C.
O 煤nico browser que est谩 na lanterna quando falamos de suporte ao HTML 5 茅 o Internet Explorer, que novidade, somente a vers茫o 10 do browser 茅 que suportar谩 as tags do HTML 5, vers茫o que 茅聽distribu铆da聽junto ao Windows 8 e que est谩 em est谩gio Beta para o Windows 7.
HTML 5, finalmente…
Agora o W3C ir谩 promover uma s茅rie de a莽玫es para que todos os browsers, clientes de email e demais aplicativos que podem consumir HTML 5 passem a padronizar este suporte, para evitar os diversos problemas que os desenvolvedores Web enfrentam hoje quando desenvolvem com CSS e JavaScript.
O 煤nico inconveniente sobre o HTML 5 茅 a quest茫o da tag <video> que ir谩 permitir embutir v铆deos diretamente via c贸digo HTML 5, sem a necessidade de plugins, como o finado Flash, o problema reside que n茫o existe uma compatibilidade quanto ao codec utilizado no browser que enquanto Chrome e Firefox batalham pela ado莽茫o do VP8, enquanto Safari e Internet Explorer batalham pela ado莽茫o do聽H.264.
Por hora a tendencia 茅 que o W3C homologue um codec novo e totalmente livre de royalties, sen茫o a batalha de patentes que vemos no segmento mobile pode tomar corpo na web tamb茅m.
Leia mais:
Chrome · firefox · internet · Internet Explorer · Webdesign · webdesigner
Quem trabalha desenvolvendo intefaces para a Web sabe a complica莽茫o que 茅 acertar um script JavaScript ou CSS para funcionar bem nos diversos navegadores, para ser mais espec铆fico, as diferen莽as entre Firefox e Chrome s茫o m铆nimas, mas a situa莽茫o 茅 bem diferente no caso do Internet Explorer, que n茫o segue os padr玫es Web.
Mesmo a Microsoft tendo trabalhado para reverter esta situa莽茫o e de fato a 煤ltima vers茫o do Internet Explorer estar bem melhor, reverter este legado 茅 algo que vai demorar um pouco mais para acontecer, mas o que fazer quando um CSS n茫o funciona como deveria para o Internet Explorer?
Fazer dois arquivos CSS e integra-los ao HTML conforme o browser 茅 algo funcional, por茅m 茅 de dif铆cil manuten莽茫o, mas n茫o entre em p芒nico (pelo menos por agora), temos uma solu莽茫o que vai permitir que voc锚 utilize somente um arquivo CSS e que dentro deste arquivo seja especificado quando utilizar o seletor e para que browser.
Veja um exemplo abaixo:
#idObjeto {width: 100%} * html #idObjeto {width: 80%} /* IE */ |
Nem 茅 preciso explicar muito, mas vejamos, temos um caso fict铆cio de que em todos os browsers o width de uma DIV fica 贸timo em 100%, menos para o Internet Explorer que fica melhor em 80%, ent茫o o script acima vai fazer duas chamadas para o mesmo seletor e o *HTML ir谩 exemplificar que para os browsers padronizados ser谩 um caminho, neste caso o 100% e para o Internet Explorer ser谩 80%.
Simples, funcional e de f谩cil manuten莽茫o, pois fica tudo bem acess铆vel dentro de um 煤nico arquivo em um 煤nico local.
Leia mais:
Chrome · design · firefox · internet · Internet Explorer · Microsoft
脡 Ubuntu trocando a interface (o que est谩 causando uma verdadeira Guerra Santa na comunidade), Windows trocando a interface e porque o Google ficaria de fora?
O primeiro produto foi o buscador que teve a sua p谩gina principal remodelada e na sequencia v谩rios outros produtos foram sendo alterados.
Agora foi a vez do Gmail.
Nova tela de logon do Gmail
A sua tela de logon est谩 utilizando a nova identidade visual do Google e tamb茅m podemos notar algumas melhorias, principalmente em termos de seguran莽a, pois o controle de phising est谩 mais pr贸-ativo e interage mais com o usu谩rio.
Dentro em breve todos os produtos do Google j谩 estar茫o sob a nova identidade visual e padronizados. Se isso 茅 parte de uma estrat茅gia maior ningu茅m tem certeza, mas para uma altera莽茫o global deste porte provavelmente algum benef铆cio o Google ir谩 obter.
Leia mais:
Adobe se borra de medo do HTML5
Sem coment谩rios · Post por Petter Rafael em Novidades, Tecnologia, Webdesign
Ap贸s comprar a Macromedia, a Adobe se tornou a propriet谩ria de v谩rios produtos como o DreamWeaver e o Flash, em uma 茅poca que o Flash era onipresente no seu segmento na Internet.
Logo ap贸s a Microsoft investiu pesado e lan莽ou a sua pr贸prio solu莽茫o para RIA, o Silverlight, que basicamente era um tipo de Flash s贸 que o player tinha menos bugs, o ambiente de desenvolvimento era mais elaborado e viria pr茅-instalado com o Windows o que de cara j谩 era uma enorme vantagem para o Silverlight ante o Flash.
A Adobe e a Microsoft come莽aram a disputar o mercado de RIA e a Adobe levou certa vantagem, pois o Flash j谩 estava consolidado quando o Siverlight apareceu.
Mas agora o Flash sofre uma ame莽a ainda maior, e se os seus recursos de multimidia pudessem ser produzidos via c贸digo, c贸digo HTML?
A Adobe tem passado noites em claro com a divulga莽茫o da implementa莽茫o do HTML5, pois v锚 nesse advers谩rio armas com a qual n茫o poder谩 lutar, principalmente porque todos os browsers j谩 est茫o correndo para implementar o HTML5 em sua totalidade, at茅 mesmo o Internet Explorer.
Neste cen谩rio a Adobe lan莽a uma ferramenta curiosa, a ferramenta chamada Wallaby ter谩 o poder de se acoplar ao DreamWeaver e converter um arquivo .FLA (fonte do Flash) em HTML5 e implementar em sua p谩gina.
Agora a Adobe s贸 ter谩 que tomar cuidado, pois o tiro pode ser no seu pr贸prio p茅, fazendo todo mundo migrar de forma acelerada do Flash para o HTML5, portando todos os seus .FLA de forma r谩pida e din芒mica e enterrar de vez o seu filho mais querido (o Flash).
Fonte: Tecnoblog
Leia mais:
internet · Novidades · Tecnologia · Webdesign · webdesigner
Framework para desenvolvimento Web em PHP/JavaScript
2 coment谩rios · Post por Petter Rafael em Dicas, JavaScript, JQuery, PHP, Webdesign
Durante o ano de 2010 esteve um planejamento e execu莽茫o o projeto de um Framework para desenvolvimento Web utilizando PHP e JavaScript baseado nas seguintes premissas e necessidades:
- Deixar o layout livre para qualquer tipo de desenvolvimento (seja utilizando Tableless ou n茫o);
- N茫o ser t茫o friendly-user como o WordPress, nosso usu谩rio ir谩 desenvolver c贸digo e n茫o arrastar elementos em tela. Centrar-se no poder do desenvolvimento de c贸digo, deixar o desenvolvedor, nosso p煤blico-alvo, fazer a sua m谩gica em PHP;
- Centrar-se no uso da JQuery como framework JavaScript para suprir todas as necessidades de crossbrowser;
- Ser livre para o desenvolvedor alterar o c贸digo-fonte do projeto e sugerir novos recursos;
- Padronizar e formatar a persist锚ncia de dados;
- Permitir que programadores e desenvolvedores iniciantes em PHP produzam sites e sistemas Web complexos;
- Facilitar a manuten莽茫o e gest茫o do sistema;
- 脕rea administrava pronta, com elementos principais utilizados para gest茫o de sites.
Bem pessoal, est谩 apresentado o framework iMais, que pelos testes permite reduzir em at茅 60% do tempo gasto no desenvolvimento de sites e sistemas Web.
Com o c贸digo-fonte aberto e livre 茅 poss铆vel utilizar o framework com os recursos existentes e expandi-lo atrav茅s de desenvolvimento pr贸prio, de forma f谩cil e flex铆vel. Mesmo utilizando o framework n茫o existe a perda de performance, problema comumente encontra em frameworks de mercado.
Nos pr贸ximos dias estaremos liberando para download o conjunto b谩sico, o que significa que no decorrer deste ano iremos investir tempo e recurso para que o framework cres莽a em termos de utilizadores e recursos, facilitando a cria莽茫o de elementos Web ricos.
Vai desenvolver em PHP? Ent茫o utilize o iMais.
Leia mais:
dicas · JavaScript · JQuery · PHP · Webdesign
Tipografia na Web, agora existe sim
Sem coment谩rios · Post por Petter Rafael em Imagem & Cria莽茫o, Webdesign
Muitos designers, geralmente os que possuem pouca experi锚ncia, trocam blocos de texto por imagens, pelo simples fato que n茫o podem garantir que o usu谩rio que acessar o site ter谩 determinado tipo de fonte utilizado.
Agora esse problema est谩 praticamente solucionado, com suporte para o Internet Explorer vers玫es 7, 8 e 9 com fontes EOT e Firefox, Opera, Chrome e Safari para fontes TTF e OTF agora 茅 poss铆vel definir uma fonte remota para ser utilizada no site.
A funcionalidade @font-face do CSS 茅 empregada para esse fim, por茅m em conex玫es lentas o designer do site se primeiro renderizado para depois a fonte ser carregada (lembre-se que a fonte agora 茅 remota) o que pode frustar um pouco, mas tamb茅m podemos contornar esse problema (e economizar banda) definindo para que primeiro a fonte seja utilizada local e somente se n茫o existir que seja utilizada a fonte remota.
Observe o c贸digo abaixo:
@font-face { font-family: nome_familia_fonte; src: local(sua_fonte.otf), url(sua_fonte.otf); } |
Note que primeiro definimos a fonte local, para depois definirmos a fonte remota.
Veja tamb茅m um exemplo de como utilizar o @font-face criado:
p { font:36px helveticaneue, Arial, Tahoma, Sans-serif; } |
Fonte: Tableless
Leia mais:
cria莽茫o · design · webdesigner
Essa 茅 uma pergunta que move multid玫es e ambos os adeptos de um ou outro software sempre defendem com unhas e dentes a sua escolha.
Mas afinal de contas, qual 茅 o melhor? Photoshop ou o Gimp?
A grande maioria dos designers gr谩ficos respondem a pergunta acima sem nem pensar: Photoshop.
Mas precisamos avaliar melhor e ver se realmente as vantagens do Photoshop frente ao Gimp s茫o realmente justific谩veis em cada caso.
Digo, com total convic莽茫o, de que boa parte dos profissionais seriam mais beneficiados pelo Gimp se resolvecem dar um chance ao Gimp em detrimento ao Photoshop e 茅 a铆 que encontramos o maior problema na ado莽茫o do Gimp, a sua curva de aprendizado. N茫o que o Gimp seja de utiliza莽茫o complexa se comparado ao Photoshop, o fato 茅 que o Photoshop por estar a anos no mercado j谩 deixou sua metodologia de uso carimbada em muitos profissionais e ditou at茅 agora as normas de como e quando determinado recurso deve ser implementado na editora莽茫o gr谩fica.
Ent茫o quando for editar sua foto ou ainda se voc锚 茅 um usu谩rio iniciante tente dar uma chance ao Gimp, sei que em determinadas situa莽玫es ele n茫o ser谩 t茫o bom quanto o Photoshop, mas levando em considera莽茫o essa lista de vantagens do Gimp frente ao Photoshop digo que vale realmente a pena tentar utiliza-lo, afinal, voc锚 pode se surpreender.
Leia mais:
A l谩stima do desenvolvimento de software web
Sem coment谩rios · Post por Petter Rafael em Clientes, Webdesign
Hoje 茅 not贸rio que um website por mais simples que seja 茅 um sistema web, pois tem ao menos acesso a um banco de dados e p谩ginas din芒micas e na maioria do caso ainda contam com uma 谩rea administrativa para controlar as atualiza莽玫es.
Al茅m da falta de seguran莽a, por falta de conhecimento dos desenvolvedores que desenvolvem software sem requisitos m铆nimos de seguran莽a, notei que muitos desenvolvedores anunciam aos 4 cantos que desenvolvem utilizando regras de tableless.
Abrindo o c贸digo-fonte dos sites exibidos no portif贸lio desses mesmos desenvolvedores notei que 90% dos que anunciam utilizar tableless produzem websites totalmente baseados em tabelas, isso mesmo, o layout 茅 todo feito em tabelas e onde foi parar a hist贸ria do tableless?
Na verdade os desenvolvedores se aproveitam da falta de conhecimento t茅cnico dos seus clientes e entregam um verdadeiro lixo tecnol贸gico.
O site at茅 abre no Internet Explorer e as vezes at茅 mesmo no Firefox, por茅m, motores de busca como o do Google n茫o se d茫o bem com esse “padr茫o lix茫o de desenvolvimento” e conseq眉entemente o seu website 茅 coloca entre os 煤ltimos em qualquer busca efetuada.
E as conseq眉锚ncias ruins n茫o param aqui, com um site dessa “categoria” voc锚 ainda poder谩 ter problemas com:
- Atualiza莽茫o do layout, o seu site n茫o ficar谩 eternamente com o mesmo layout, experimente altera-lo em um site feito em tabelas. 脡 problema na certa;
- Maior consumo de banda (tr谩fego) o que resulta em maior custo de hospedagem;
- Site muito mais lento para o carregamento;
- Problemas graves de compatibilidade entre os browsers (navegadores).
Se eu fosse adentrar em requisitos mais t茅cnicos teria mais uma lista imensa, ent茫o quando for comprar um website, veja muito bem a empresa ou desenvolvedor contratado, pois o barato pode e vai sair muito mais caro no futuro.
Leia mais:
Clientes · internet · Webdesign · webdesigner
Todos os browser at茅 hoje utilizam uma API do Windows chamada GDI para renderizar as p谩ginas Web, 茅 uma t茅cnica antiga por茅m tem funcionado com relativo sucesso at茅 os dias de hoje.
Mas os computadores modernos s茫o equipados, na maioria dos casos, com processadores de grande performance e em alguns casos com placas de v铆deo off-board que maximizam o poder gr谩fico do computador e tudo isso est谩 sendo subutilizado pelo browser.
Em decorr锚ncia desse fato a Microsoft e a Mozilla est茫o trabalhando pesado para implementar o uso do Direct2D em detrimento do uso do GDI no Internet Explorer 9 (a ser lan莽ado) e no Firefox (sem vers茫o definida) e com isso aproveitar melhor o potencial de processamento de v铆deo dos computadores e agilizar mais ainda a exibi莽茫o de p谩ginas Web.
Mas porque tanto trabalho para implementar isso no browser? Simples, o browser 茅 e ser谩 cada vez mais uma importante ferramenta para o uso dia-a-dia, hoje temos dezenas de jogos casuais que utilizam o browser como plataforma de exibi莽茫o. J谩 pensou um browser com acelera莽茫o gr谩fica?
O Firefox, por exemplo, com suas dezenas de complementos (add-ons) substitui dezenas de aplicativos de terceiros que ter铆amos que instalar, o browser 茅 a plataforma do futuro na micro-inform谩tica.
Uma coisa mais legal ainda, al茅m do poder que a acelera莽茫o gr谩fica traria aos jogos executados via browser imagine com a implementa莽茫o do HTML 5, onde v铆deo ser谩 embutido diretamente no c贸digo-fonte HTML sem precisar de artif铆cios como o Flash ou Silverlight, por exemplo, um browser com acelera莽茫o gr谩fica real seria uma enorme m茫o na roda para tudo isso.
Leia mais:
Todo mundo est谩 falando maravilhas da plataforma de desenvolvimento RIA da Adobe, denominada Flex. O Flex 茅 perfeito, 茅 maravilhoso, n茫o sei como desenvolver RIA se n茫o for utilizando Flex.
Legal, ent茫o porque o site da Adobe 茅 t茫o lento e lacoso, se quiser conferir fa莽a voc锚 mesmo um teste, acesse o site e tente ficar 30 minutos navegando. 脡 para dar raiva. E que ningu茅m fale que o problema 茅 conex茫o (fiz um teste com conex玫es de 1 Mbps e 4 Mbps respectivamente e a demora foi a mesma) e nem que o computador cliente 茅 lento (um Athlon X2 500+ e um Quad Core) e continua lento.
O site tem um est茅tica legal, tem recursos visuais atraentes, mas 茅 lento, 茅 muito lento. Da铆 podemos tirar tr锚s conclus玫es:
- O Flex d谩 recursos ao desenvolvedor mas cobra caro em termos de performance (e ainda reclamam do Java);
- Os desenvolvedores contratados pela Adobe n茫o sabem utilizar e pr贸pria tecnologia;
- As duas alternativas anteriores.
Mais uma novidade, ao fazer o download de algum trial de software da Adobe, o mesmo 茅 realizado por um gerenciador de download pr贸prio. Escrito em Flex? N茫o, escrito em Java. Vai entender.
