TidBits

Oct 9

UOL realizará workshops de e-commerce gratuitos

Com o objetivo de divulgar seu produto PagSeguro (uma forma de pagamento para serviços ou vendas na internet), o UOL organiza uma tour de workshops em São Paulo, Campinas, Curitiba, Porto Alegre, Brasília e Vitória. O evento é exclusivo para desenvolvedores, é bem curto, dura 4 horas, fala sobre comércio eletrônico, ensina a usar a ferramenta e tem direito a um coffee break, tudo gratuíto.

workshop de e-commerce realizado pelo UOL

A programação será a seguinte:

Mitos do e-commerce - Dennis Ferreira
Dennis Ferreira fará uma apresentação sobre a ferramenta, vantagens competitivas que o PagSeguro pode oferecer ao seu negócio e também divulgará o novo Programa de Bônus por Indicação.

Desenvolvimento para comércio eletrônico - Elcio Ferreira (Diretor da Visie)
Élcio fará uma abordagem técnica sobre desenvolvimento especificamente para e-commerce.

Sessão técnica - Hands on de implementação completa de pagamentos online
Técnicos do PagSeguro demonstrarão a implementação completa de pagamentos online, tirando as principais dúvidas dos desenvolvedores.

Faça a inscrição no site do evento para garantir sua vaga.

Os próximos workshops serão:
Porto Alegre, 08 de outubro
Brasília, 22 de outubro
Vitória, 13 de novembro
São Paulo, 20 de novembro

Oct 7

CSS Global Reset - Elimine as diferenças entre browsers

Recentemente a Belinha comentou de CSS Global Reset num post falando de construção de sites cross browsers , mas acho que isso é tão importante que merece um post só pra ele.

Para entender o que faz o reset, pense que todo browser tem prioridades para definir o CSS de uma página. A ordem é:

1º - CSS inline : aquela porqueira <div style=”float:left”>

2º - CSS na página : outra coisa que não recomendo, e não vejo necessidade. É quando coloca a tag style dentro da tag head
<style> .publicidade { width: 200px; } </style>

3º - CSS externo : esse é o css normal, quando invocamos dentro do head <link href=”home.css” type=”text/css” rel=”stylesheet”/>

4º - CSS definido pelo browser: sim, isso existe e é isso que nos causa problemas.

Quando nenhum CSS é encontrado para um elemento (div, p, h1, img, etc..), o navegador coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, bordas dos elementos, etc…

É aí que entra o CSS Global Reset, que são uma série de propriedades css atribuidas a todos os elementos html, justamente para retirar o css definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Mac, Ie, Opera, etc.

Existem diversos CSS Global Reset ( normalmente as pessoas colocam alguma coisa a mais pra facilitar no seu projeto ), mas todos eles variam pouco. Vejam o que eu utilizo:


*{outline-color:invert;outline-style:none;outline-width:medium;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: inherit;
	font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea {  font-size: inherit; }

E normalmente, quando vou começar a montar um html, um projeto novo, eu altero as propriedades da fonte, por exemplo: se o layout for usar sempre arial, vale a pena trocar “font-family: inherit;” para “font-family: arial;”

Seja lá qual CSS Global Reset escolherem, usem sempre um quando iniciarem um projeto, isso evita muitooo trabalho.

Oct 7

Melhorando a performance do seu site com a nova ferramenta do Yahoo!

O Yahoo! lançou na semana passada o smush it! uma ferramenta para auxiliar desenvolvedores a reduzir o peso das imagens, e assim otimizar o carregamento de seus sites, tornando-os mais leves. Não parece nada demais para programadores de interface que sabem (e precisam lidar com) o Photoshop, já que nele o comando “Save for the web” ou o querido CRTL + ALT + SHIFT + S, ajuda a escolher a versão mais reduzida da imagem.

Mas a vantagem do smush it!, é que segundo seus desenvolvedores, apesar de já exisitirem vários editores que otimizam o tamanho do arquivo da imagem, ainda ficam uma tonelada de dados extras (e inúteis) no arquivo. Por exemplo, informação sobre a data de edição ou criação do arquivo, o nome do editor utilizado, etc. - que são os dados que o smush it! vai remover.

Nessa aplicação web, as imagens, enviadas através de uma url ou por upload, são otimizadas e disponibilizadas para o download novamente. Uma grande sacada é que se pode enviar várias imagens de uma vez, e depois baixá-las com um arquivo único zipado.

Quando a foto é otimizada, aparecem os percentuais de redução. Nos testes que fiz, variaram de 2% a 48% de acordo com a imagem. Mesmo para os valores mais baixos, parece compensar passar as imagens pelo Smuthit, considerando que pra sites grandes, diminuir qualquer 2% do peso de cada imagem, já é um grande otimizador de performance. É legal comentar que em todos os testes que fiz, não houve perda da qualidade da imagem.

Tela de resultado do smush it!

O smush it! também tem uma extensão de Firefox, que cria um ícone na barra de status do navegador. Quando se está em um site, basta clicar com sobre o ícone, e ele irá abrir o smush it em uma nova aba, carregando todas as imagens da página, sendo “smushadas” e com o link para o download do .zip. Mais fácil que isso não tem né?

Oct 5

Podcasts sobre desenvolvimento web, tecnologia e internet

Montei uma coleção de podcasts que falam de internet ou desenvolvimento web. Todos os podcasts estão disponíveis para ouvir nos sites e para download para você ir ouvindo no seu celular / ipod / mp3 player e aprendendo algo novo enquanto está indo trabalhar, principalmente pra quem mora em São Paulo e demora bem mais que uma hora pra chegar no trabalho…

O SEOCast fala sobre SEO / SEM, dando dicas para promover o seu site nos buscadores. Tem apenas 5 episódios, vale a pena escutar.
Seocast - Podcasts Sobre SEO e SEM

Podcast Digital Paper grava a cada 14 dias um podcast falando basicamente sobre Internet mesmo. Temas interessantes já foram discutidos lá como: microformats, acessibilidade, wordpress, usabilidade entre outras coisas. Os podcasts são apresentados de forma divertida e descontraída e tem duração aproximada de uma hora cada um.
Podcast Digital Paper

Tem também o Podcast da revista Info e o blog Decodificando quem falam sobre novas tecnologias, novos produtos. Legal pra quem é geek.

E por último, um podcast onde você provavelmente não vai aprender nada, mas vai dar boas risadas, o jovem nerd apresenta notícias e debate de forma divertida. O podcast já está na edição 130, o site é antigo, vem desde 2002 mas curiosamente, neste momento está fora do ar, espero que seja só uma queda de servidor.

Oct 4

Novidades do Wordpress para a versão 2.7

Essa semana no blog do Wordpress foram anunciadas as mudanças na interface de Admin da versão 2.7 do Wordpress. Após as enquetes com os usuários sobre as preferências de cada um, a equipe do Matt apresentou os wireframes.

Wireframes da nova versão do Wordpress

As novidades mais interessantes são:
- Menu lateral com subníveis
- Novos grupamentos de itens no menu
- Itens de cada área podem ser colapsados, expandidos e arrastados estilo “drag and drop”
- Possibilidade de escolher os itens que serão exibidos ou emitidos em cada sessão

Infelizmente, essas mudanças ainda são parte do protótipo. Mas pra quem já que dar uma melhorada no Admin, existem alguns plugins para isso:

Lighter Admin Drop Down Menus

Imagem do Lighter Admin Drop Down Menu

Já usei esse plugin, facilita muito a navegação, porque não você pode diminuir os cliques no meio do caminho. Mas o plugin é incompatível para que usa plugins que abrem um terceiro nível de navegação, que é omitido.

Ozh’ Admin Drop Down Menu

Imagem do Ozh Admin Drop Down Menu

Esse eu nunca testei, mas oferece as mesmas facilidades do Lighter Menus. Não sei como se comporta com plugins que tem subníveis de navegação. Mas se alguém testar, dps vem me falar ok?

Fluency Admin

Eu não conhecia o plugin até ontem, quando o Kadu me apresentou. O plugin com certeza foi fonte de inspiração pra versão nova do WP. Para quem é muito ansioso ou quer ver se vai adaptar com esse modelo lateral de menu, é uma ótima opção instalar esse plugin (compatível somente com as versões 2.6x do Wordpress).

Oct 2

Como fazer Tooltips com o MoreCSS

Semana passada fiz um post falando sobre o MoreCSS e disse que daria um exemplo ensinando a fazer Tooltip, demorei mas não esqueci. Fazer Tooltips com o MoreCSS é muito fácil.

Veja mais, explicando como fazer na matéria completa.

« Pr�ximo 1 2 3 4 5 6 7 8 91011 12 13...16 17 Anterior »

UOL realizará workshops de e-commerce gratuitos

CSS Global Reset - Elimine as diferenças entre browsers

Melhorando a performance do seu site com a nova ferramenta do Yahoo!

Podcasts sobre desenvolvimento web, tecnologia e internet

Novidades do Wordpress para a versão 2.7

Como fazer Tooltips com o MoreCSS

RSS

Tags

Categorias

Quem?