Otimizando PNG e JPG no Ubuntu usando PNGCrush e JpegTran

Desenvolvimento, Linux/SL Sem Comentários

Salve,

Estou num projeto, na parte de otimização de frontend e backend para ter uma melhora na performance e outras coisinhas mais. Um dos itens do YSlow, PageSpeed, WebPageTest e qualquer outro sobre otimização de frontend é: Otimizar imagens.

O melhor link sobre práticas de otimização de frontend está no  Best Practices for Speeding Up Your Web Site, do Yahoo! Developer: http://developer.yahoo.com/performance/rules.html

Eles usam/indicam os:

  • pngcrush – para otmização de PNG
  • jpegtran – para otimização de JPEG
  • imagemagick – para otimização de GIF

Para instalar esses no Ubuntu:

PNGCrush

Você pode simplesmente dá:

sudo aptitude install pngcrush

Mas ele instala uma versão mais antiga, a nova é somente:

  1. Baixar o pngcrush aqui: http://pmt.sourceforge.net/pngcrush/]
  2. Descompactar: unzip pngcrush-1.7.9.zip
  3. Entrar na pasta: cd pcr010709/
  4. Executar: make
  5. Executar depois: make install
  6. Teste: ./pngcrush -version
  7. Mova para a pasta /usr/bin/: sudo mv pngcrush /usr/bin/
  8. Corra para o abraço :D

Fácil né?

Usando: pngcrush -rem alla -reduce -brute image.png image_output.png ( comando errado, desculpe pngcrush image.png -rem alla -reduce -brute result.png )

JPEGTRAN

Essa está difícil. Tentei instalar a libjpeg8 do http://www.ijg.org/ mas não consegui, tive que instalar a 6b. Depois eu continua procurando a última versão.

Vamos instalar:

  1. Procure por jpegsrc.v6b.tar.gz
  2. Eu achei aqui: http://dir.filewatcher.com/d/GNU/Other/jpegsrc.v6b.tar.gz.613261.html
  3. Faça o download
  4. Entre na pasta: cd jpeg-6b/
  5. Configure: ./configure
  6. Execute: sudo make install
  7. Verifique: jpegtran -h
  8. Essa não precisa mover, já coloca lá automático
  9. Corra para o abraço :)

Facim! Facim!

Usando:  jpegtran -copy none -optimize -outfile image_output.jpg  image.jpg ( comando errado, desculpe jpegtran -copy none -optimize -perfect src.jpg dest.jpg )

Agora volte para o Best Practices for Speeding Up Your Web Site, do Yahoo! Developer ( http://developer.yahoo.com/performance/rules.html ) e comece a trabalhar na melhora da performance do frontend.

* Estou fazendo testes com ferramentas, seguindos dicas e postarei mais sobre isso. Desde já procure: Firebug, YSlow, PageSpeed, WebPageTest e vá se divertindo.

Valeu!

Plugin Easing do jQuery e Incompatibilidade

Desenvolvimento, Tecnologia 2 Comentários

Salve,

Estive ajudando um Amigo ( Hilton Luiz ), e ele estava usando o LavaLamp ( menu ) e o Carousel, mas teve um problema: os 2 plugins usavam o Easing, mas o LavaLamp só funcionava no 1.1 e o Carousel no 1.3.

Solução:
No site do Easing tem um arquivo onde você usa junto com a 1.3 e ele torna-se compativel com os scripts que só funcionam na 1.1. Bem legal e fácil.

http://gsgd.co.uk/sandbox/jquery/easing/

Parabéns equipe Easing jQuery.

NFePHP

Desenvolvimento, PHP 1 Comentário

Salve,

Estou participando do projeto NFePHP – Nota Fiscal Eletrônica em PHP, muito legal, com uma equipe de primeira, empenhada a torná-lo um projeto ‘foda’ e vai ser. Está licenciado em GPL V3. Quer ajudar? http://www.assembla.com/wiki/show/nfephp/Como_participar

Mais em http://www.assembla.com/wiki/show/nfephp/ e http://www.nfephp.org

Vamos que vamos!

SQLReactor – Um Reação em Cadeia quando se fala de ORM para PHP

Desenvolvimento, PHP 1 Comentário

Salve,

Pessoal já tem um tempo que uso e participo do CoreTeam do SQLReactor por que simplesmente eu gostei muito, rápido pra cacete, fácil demais de modelar as entidades, perfeito. É inspirado no SQLAlchemy, ORM para Python, e foi criado por Snit.ram aka Rafael Martins, o cara bota pra ferver, visitem e participem do grupo SQLReactor Brasil, aqui http://groups.google.com.br/group/sqlreactor-brasil e em breve aqui http://www.sqlreactor.com, e descubra a maravilha de ORM.

Valeu!

DownVideoLog – Download de Videos do VideoLog

Desenvolvimento, PHP, Tecnologia Sem Comentários

http://www.theducks.com.br/downvideolog/DownVideoLog.jpg

Salve,

Tem umas 2 semanas que criei rapidinho esse sisteminha que voce passa uma URL onde tenha um video do Videolog ‘embed’, externo ou do próprio Videolog, e ele te retorna a URL do FLV ou força o download do mesmo, qualquer problema avise-me.

http://www.theducks.com.br/downvideolog/

Valeu!

Video-aulas de PHP

Desenvolvimento, PHP, Tecnologia Sem Comentários

Salve,

O Igor Fernandes ( da SistemaSIS e CBCT ) lançou 16 video-aulas sobre PHP, ótima iniciativa.

Veja aqui: http://www.youtube.com/results?search_query=php+CBCT&search_type=&aq=f

Baixe aqui: http://www.4shared.com/file/116243476/6732b2fc/PHP_CBCT_completo.html

Parabéns ao Igor Fernandes.

Valeu!

Manual de Padronização de Codificação – PHP Coding Standards

Desenvolvimento, PHP Sem Comentários

Salve,

Fazendo algumas pesquisas e usando o material do Walker de Alencar, PHP Coding Standards, criei esse “manual”, que será adotado por mim de agora em diante.

Lembrando que 90% do manual é o PHP Coding Standards, do Walker de Alencar, eu só mudei algumas coisinhas e acrescentei outras e pretendo acrescentar mais e mais.

Manual de Padronização de Codificação – PHP Coding Standards

PHP Coding Standards ( Original do Walker de Alencar )

Valeu!

Python para Desenvolvedores – Livro em CC

Avisos, Desenvolvimento, Linux/SL, Outros Sem Comentários

Salve,

Tem um cara ( aka Brother Wolf ) que fez uma contribuição genial: criou um livro, Python para Desenvolvedores, e distribuiu em CC ( Creative Commons ) para download com download da capa ( formato Jpeg ).

Um viva a esse gênio: Brother Wolf.

Para baixar: http://ark4n.wordpress.com/python/

Valeu!

E quando o “da moda” atrapalha e nos deixa “de fora”

Desenvolvimento, Tecnologia Sem Comentários

Salve,

Atualizado: O título estava “foda da moda”, estava errado, seria “fora da moda”, mas resolvi mudar, não estava coerente com o texto, eu acho :D desculpe.

Quando foi lançado o Flash, foi um Buummm. Todo mundo queria aprender e fazer em flash com várias animações, o foco era animação.

Ai o Flash virou Profissional, entrou a programação ActionScript ( AS ), um pouco a menos de animações, mais conteudo, mais interação ( com o cliente ( pessoa/usuário ) e com o servidor ).

Chegou o Flex, lojas e casos de sucesso com Flex foram explodindo. E-commerce? Use Flex! Interação/RIA? Use Flex! Flex virou sinônimo de Rich Internet Applications ( RIA ).

Ai o Flex se acalmou, “sumiu” dos holofotes. Nesse caminho, o fora de moda migrou do html 4, para o xhtml com css e javascript, padronizado, bonitinho.

Ai alguém ressuscitou o AJAX, milhões de framework’s ótimo, que também tem efeitos e isso e aquilo. Ai o Ajax é sinônimo de RIA.

Começa a briga de evangelistas, AJax x Flex/Flash, quem realmente é o sinônimo de RIA? Quem tem mais vantagens ( quanto a código, sobrecarga/peso, facilidade, usabilidade, acessibilidade e etc )?

Ajax, por não ser binário, sai na frente. Mas tanto um quanto o outro não são perfeitos.

O Flex/Flash volta para a briga, tentam torná-lo acessível, por caso das buscas ( SEO, SEM e outros S*mais duas letras qualquer* ) e seus filtros.

O melhor mesmo é o velho xHtml com CSS, seguindos as regras ( fechamento de tags, títulos e descrições e outros ), com seus efeitos usando de Javascript não-obstrusivo. Seu navegador não suporta Javascript? O negócio funciona. Ele suporta? O negócio funciona, mais bonito, com efeitos e outras coisas que agradam.

Então começou a organização do mundo RIA.

Javascript/Ajax:

- Vai fazer site? Javascript não obstrusivo e um tiquinho de Ajax.

+ Quem Manda? O Cliente/Usuário, aquele que tem o IE6 ruim pra caramba até aquele que usa o Firefox e outros Navegadores ( de verdade ).

- Vai fazer sistema? Ajax cai bem, com moderação, provocando a modernização moderada dos cliente, mais consideração com a segurança do tráfego gerado.

+ Quem Manda? A necessidade. Se usando ajax, efeito de toggle e etc, vai facilitar o preenchimento daquele cadastro gigante, tornando mais fácil e menos cansativo/chato a tarega, muitos vezes repetitiva, então usa e facilita a vida do Cliente/Usuário.

Flex/Flash:

- Vai fazer site? Melhor em Hot Site, com aquela animação bacana, aquele player legal tocando um musiquinha que você pode parar se achar chata. Aquele banner com animação e um interatividade, que é raro ver. Usam banner em flash para fazer texto subir e descer, coisa que com GIF você faz e pode sair mais leve além de não precisar de plugin e tal.

- Vai fazer Sistema? Flex nele também é bom. Agora como? Sistema de Atendimento Online, tipo o MySuite da Brazip, show. Sistema de EAD com vídeo e outros, tipo o Treina Tom. O tempo de carregamento mata o Flex. Um exemplo:

Olhe esse site: http://www.netsar.com.br/

Em Flex, veja se é necessário para o tipo de aplicação, que é passar a informação ao cliente, coisa que ele não pode querer esperar. Diferente de um EAD, Atendimento Online, onde ele deve esperar se quer aprender ou ser atendido e tirar as dúvidas.

Agora olhe esse: http://www.vlourenco.com/

Tem suas diferenças. Mas se o primeiro seguisse a linha de informar com clareza e não pelo impressionar com “peso”, seria melhor, mais fácil do cliente chegar ao o seu produto.

O tempo de espera, carregamento sempre foi o “expulsador” de clientes/usuários do sites. O uso da tecnologia “Da Moda”, pode piorar mais ainda, não só pelo peso, mais pelas dependências. Muito trabalho para pouca coisa é a pior coisa que existe na web. Muitos passos para o produto, muitos segundos e até minutos para carregar uma tela.

Olhe isso: http://delicious.com/

Tudo está a UM CLIQUE.

Mas além da tecnologia da Moda, deve existir um trabalho de arquitetura da informação, para definir onde cada coisa vai está, quais devem ter destaque, e tantos outros quais.

Mas do que adianta tem uma arquitetura de informação perfeita. Se o site demora mais do que o necessário. Pior quando é mais rápido assistir um vídeo no Youtube de 2min numa conexão discada, do que carregar um site com “texto” e pouco multimidia, numa conexão de 300kb.

Ai vem você me dizer que o SGBD é lento e isso e aquilo. Olhe os sites que comparei, o único que precisa de um SGBD e cluster de servidores bom é o Del.icio.us, o outros são…texto, foto.

E termino por aqui, espero que, se alguem ler, consiga retirar algo de bom e claro para o seu dia-a-dia.

* Para não ficar com exemplo ruimde uso “da moda” Flex:

SlideRocket : http://www.sliderocket.com

Demos: http://www.sliderocket.com/product/demos.html

Adobe Buzzword: https://buzzword.acrobat.com

Isso sim é uso inteligente “da Moda”.

Sucesso a todos.

AGile – Scrum

Desenvolvimento Sem Comentários
Agile (Atualizado)

View SlideShare presentation or Upload your own. (tags: scum agile)

Icons by N.Design Studio. Designed By Ben Swift. Powered by WordPress and Free WordPress Themes
Entries RSS Comments RSS Log in