Kenji Yamamoto

Web User Interface Designer and Front End Developer

Archive for category Developer

13 Add-ons para Firebug

Jun 22

Posted by Kenji Yamamoto in Default, Developer, Linux, add-ons, css, javascript, plugin

FirebugSe voce é desenvovedor web, voce algum momento já trabalhou com o Firebug, uma ferramenta que auxilia no desenvolvimento e gerenciamento de aplicações web. Especialmente, após o JavaScript e Ajax que se tornou muito popular, é difícil o desenvolvimento e depuração sem Firebug.

Este grande add-on para o Firebug, foi desenvolvimento por uma equipe talentosa, e tem muitas características que o tornam imprescindível, tais como:

  • Trabalho dentro do browser, sem necessidade de outros aplicativos;
  • Estar em tempo real, registrando todos os pedidos;
  • Capacidade de editar código e ver os resultados instantaneamente;
  • Depurar JavaScript, medir o seu desempenho e muito mais.

Existem vários add-ons que podem adicionar mais potência ao Firebug para desenvolver com mais facilidade e agilidade. Aqui estão eles:

YSlow

yslow
YSlow Firebug é um add-on para analisar páginas web e receber sugestões sobre formas de melhorar o desempenho Ele também fornece ferramentas de análise desempenho, incluindo Smush.it ™ e JSLint.

Page Speed

pagespeed

Muito semelhante ao YSlow, é um add-on desenvolvido pela equipe do Google para avaliar o desempenho de páginas da web e, melhor de tudo, voce recebe sugestões (com base na “Web Performance Best Practices”) sobre as formas de melhorá-las.

Page Speed otimiza automaticamente imagens e fornece os comprimidos foruploading posterior.

Pode também detectar Javascript e CSS carregados que, na verdade, não é utilizada para diminuir o tamanho total dos arquivos.

Perfect Pixel

pixelperfect

Perfect Pixel web permite que desenvolvedores e designers coloquem o layout superposto a uma página HTML, afím de comparar inperfeições e desalinhamentos na página.

É possível ligar/desligar qualquer número de elementos no design para ver se enquadra bem. E, com a opção opacidade, a composição pode ser visualizada sobre o HTML.

CodeBurner

codeburner

CodeBurner oferece um painel de referência com uma ferramenta de pesquisa para estudar os elementos HTML, os atributos, propriedades e CSS.

Ela também fornece atalhos para visualizar informações ou código sobre um item selecionado.

FireUnit

fireunit

FireUnit é uma API desenvolvida em JavaScript, para fazer teste simples – testes unitários, tudo executado sem necessidade de novas tabs do firefox.

FirePHP

firephp

Com a ajuda de FirePHP, é possível fazer logon para o Firebug console por um método PHP simples.

Os dados são enviados através de resposta ao cabeçalhos e não irá interferir com o conteúdo da página.

Para qualquer desenvolvedor que tenho utilizado a interface do Firebug, essa extensão é de grande ajuda para depuração de códigos PHP.

FireRainbow

firerainbow

FireRainbow acrescenta uma melhor sintaxe de apoio a Firebug e tem suporte a temas.

FireDiff

firediff

FireDiff acrescenta um quadro que acompanhar todas as alterações feitas no Firebug e pelo próprio site, os CSS e os DOM.

Isto fornece um olhar mais profundo sobre a funcionalidade do site e ajuda a manter um registro das alterações que foram necessárias para depurar a página de exibição.

JiffyFirefox Extension

jiffyextension

Jiffy Firefox Extensão, usando o Jiffy-Web, acrescenta um novo painel para Firebug e gera o um relatório de tempo médio de execução dos elementos requisitados na página.

Hammerhead

hammerhead

Ele permite que você meça o tempo de carregamento páginas.

A extensão tem suporte para várias páginas e pode limpar caches (disco e memória), com um clique motrará o resultado.

Firecookie

firecookie

Firecookie, é um visualizador / gerenciador de cookies, que trabalha dentro Firebug.

Para um desenvolvimento mais rápido, quando codifica uma aplicação, facilita a visualização dos cookies e os seus valores, datas de expiração, etc

Também é integrado com o Net painel, exibe cookies enviados e recebidos.

Firefinder

firefinder

Firefinder oferece uma maneira de encontrar rapidamente elementos HTML, CSS e suas congruências ou expressão XPath.

Ela permite que você teste instantaneamente ao mesmo tempo, seletores CSS na página,  enquanto vê o conteúdo e combinando com elementos em destaque na página.

LiveCoder

livecoder

LiveCoder estende o Firebug e permite que desenvolvedores que controem Add-ons, possam analiza-los e modifica-los a qualquer momento.

Tags: , , , , , , , , ,

No Comments

Ajax no Django com jQuery

Jun 9

Posted by Kenji Yamamoto in Developer, Django, jquery

Como usar Ajax com o Django?

Essa é uma grande pergunta principalmente para os iniciantes. Usar Ajax juntamente com o Django é muito simples como praticamente tudo neste framework. O que irei usar aqui é o framework JavaScript chamado jQuery, que será usado para enviar a requisição e interpretar o retorno em formato json dos dados.

Vamos a prática, o link para download do código fonte está no final do artigo.

Crie um projeto novo:

django-admin.py startproject DjangoAjax

Dentro da pasta do projeto crie uma aplicação:

python manage.py startapp contatos

Ainda dentro da pasta do projeto crie os seguintes diretórios:

/media 
 |---/js 
/templates

Dentro da pasta /media/js/ coloque o arquivo do jQuery que pode ser baixado em http://jquery.com/ [jquery.com].
Não vou explicar aqui a parte de configuração do settings.py tendo em vista que basta algumas alterações simples e rotineiras como configurar o banco e a app instalada, e baixando o código fonte de exemplo você poderá ver como foi configurado o projeto.
Vamos ao models.py da aplicação “contatos”:

from django.db import models

class Contatos(models.Model):
    nome = models.CharField('Nome', max_length=40)
    telefone = models.CharField('Telefone', max_length=15, blank=True)
    celular = models.CharField('Celular', max_length=15, blank=True)
    email = models.CharField('E-mail', max_length=40, blank=True)

    class Meta:
        db_table = 'contatos' #define o nome da tabela no banco

    def __unicode__(self):
        return self.nome

Criada a classe Contatos e rodado o syncdb vamos ao nosso arquivo views.py:

# -*- coding: utf-8 -*-
from django.core import serializers
from django.http import HttpResponse
from django.shortcuts import render_to_response
from DjangoAjax.contatos.models import Contatos

def index(request):
    return render_to_response('index.html',)

def get_contatos(request):
    contatos = Contatos.objects.all()
    retorno = serializers.serialize("json",  contatos)
    return HttpResponse(retorno, mimetype="text/javascript")

Assim como o models, o views é muito simples, e apenas com a função “get_contatos” já temos como realizar a mágica do ajax com ou sem o framework jQuery ou usando um outro framework de javascript que preferir.
O que fazemos na função “get_contatos” nada mais é do que pegar todos os contatos da nossa tabela “Contatos” e usarmos o serializers do Django para transformar nossos dados em um formato json.
O serializers do django é um framework que traduz nossos objetos em um outro formato, são eles:

  • xml
  • json
  • python
  • yaml

Mais informações sobre o serializers pode ser encontrado aqui http://docs.djangoproject.com/en/dev/topics/serialization/?from=olddocs [docs.djangoproject.com].

Deixe seu arquivo urls.py assim:

from django.conf.urls.defaults import *
from django.contrib import admin
import os

BASEDIR = os.path.abspath(os.path.dirname(__file__))

admin.autodiscover()

urlpatterns = patterns('',
    (r'^admin/(.*)', admin.site.root),
    (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': BASEDIR + '/media/'}),
    (r'^$', 'DjangoAjax.contatos.views.index'),
    (r'^get_contatos/$', 'DjangoAjax.contatos.views.get_contatos'),
)

A url media/ vai servir nossos arquivos estáticos, neste caso usaremos apenas o jquery.

Agora vamos olhar o nosso arquivo index.html que é usado em nosso views.py, vou mostrar ele em duas partes, o base.html é apenas um html base e não o mostrarei aqui sendo que ele pode ser visto nos fontes.

{% extends "base.html" %}
{% block head %}
<script type="text/javascript">
    $(document).ready(function(){
        $("#btnContatos").click(function(){
            $.ajax({
                type: "GET",
                url: "/get_contatos/",
                dataType: "json",
                success: function(retorno){
                    $.each(retorno, function(i, item){
                        $("#corpoTabela").append('<tr>' +
                        '<td>' +
                        item.fields['nome'] +
                        '</td>' +
                        '<td>' +
                        item.fields['telefone'] +
                        '</td>' +
                        '<td>' +
                        item.fields['celular'] +
                        '</td>' +
                        '<td>' +
                        item.fields['email'] +
                        '</td>' +
                        '</tr>');
                    });
                }
            });
        });
    });
</script>
{% endblock %}

Esta primeira parte, é onde a mágica realmente começa a acontecer, o que temos aqui é uma função atribuída a ação de click do botão “btnContatos”, esta função utiliza o recurso de ajax do jQuery.
Vamos detalhar um pouco a função, vou direto para o “$.ajax”:

type: "GET"

– Determina o método http, GET, POST …

url: "/get_contatos/"

- Nossa url declarada lá no urls.py

dataType: "json"

– O tipo de dados que a url vai retornar.

success: function(retorno){

- Caso tenhamos sucesso a função segue em frente.

$.each(retorno, function(i, item){

- Faz um laço e pega todos os itens do objeto “retorno”
Daqui em diante a tabela é montada usando o “append” para inserir as tags e os dados no html. Neste exemplo estou montando uma tabela mas você pode fazer o que quiser com os dados.

Agora a segunda parte, que nada mais é do que o html que vai receber os dados:

{% block conteudo %}
    <table id="contatos">
        <thead>
            <tr>
                <th>
                    Nome
                </th>
                <th>
                    Telefone
                </th>
                <th>
                    Celular
                </th>
                <th>
                    E-mail
                </th>
            </tr>
        </thead>
        <tbody id="corpoTabela">
        </tbody>
    </table>
    <input type="button" id="btnContatos" class="botao" value="Pegar Contatos">
{% endblock %}

Temos ali nosso botão que ao ser clicado chama a função atribuída ao evento click dele.
Pronto, era isso, muito fácil, prático e simples, com isso as possibilidades são enormes, você pode fazer muita coisa usando o jquery e o serializers do Django, agora o resto é com sua imaginação e criatividade.
Abraços e até a próxima!

Código fonte de exemplo: http://www.kenjiyamamoto.com/blog/files/DjangoAjax.zip

Não será divulgado!

Um site válido!

[ informação retirada do site do RFDev.org ]

Tags: , , , , , , ,

No Comments

Guia de comandos Linux para iniciantes

May 28

Posted by Kenji Yamamoto in Developer, Linux

Abra um shell e divirta-se!
Onde digitar os comandos, login e logout da shell, comandos de ajuda e referências.

  • dmesg – Mensagens de inicialização
  • id – Mostra o usuário atual
  • man – Ajuda sobre algum comando, assunto ou arquivo de configuração
  • info – Ajuda sobre algum comando, assunto ou arquivo de configuração

Comandos para Manipulação de Arquivos

Um tutorial sobre vários dos comandos necessários para lidar com arquivos e diretórios no Linux.

  • pwd – Exibe o diretório atual
  • cd – Navegando entre diretórios
  • ls – Listar arquivos
  • mkdir – Cria um diretório
  • rmdir – Remove um diretório vazio
  • cp – Cópia de arquivos e diretórios
  • mv – Move ou renomeia arquivos e diretórios
  • rm – Remove arquivos e diretórios
  • find – Procura arquivos
  • ln – Cria links entre arquivos
  • cat – Exibe o conteúdo de um arquivo
  • head, tail – Mostra o começo e fim de um arquivo
  • file – Indica o tipo de arquivo
  • touch – Muda timestamps

Compactação e Descompactação

Mostra os formatos básicos de arquivos compactados e como lidar com eles no Linux.

  • tar – Agrupando arquivos
  • gzip, bzip2 – Compactando arquivos
  • zip, rar – Outros formatos de arquivos compactados

Comandos de Tratamento de Texto

Os comandos para tratar do conteúdo dos arquivos. Procurar, substituir, juntar, cortar…

  • sort – Ordena um arquivo alfabeticamente
  • uniq – Elimina linhas repetidas
  • grep – Procura texto e expressões dentro de um arquivo
  • paste – Combina arquivos em um só
  • cut – Separa um arquivo por campos e imprime apenas partes especificadas
  • tr – Transforma caracteres
  • sed – Filtragem e Transformação de Conteúdo

Permissões

Além de mostrar como funcionam as permissões dos arquivos no Linux, ensina a utilizar os comandos que tratam das permissões.

  • chown – Modifica os donos de arquivos e diretórios
  • chmod – Modifica as permissões dos arquivos e diretórios
  • umask – Visualiza e muda a máscara padrão de permissões

Processos

Como funciona a execução dos programas no Linux e como tratá-los.

  • ps – Listar processos
  • top – Lista processos em tempo real
  • pstree – Mostra processos em forma de árvore hierárquica
  • kill, killall – Envia um sinal ao processo (MATA!)

Comandos de Informações do Sistema

  • date – Mostra a data e hora do sistema
  • cal – Mostra um calendário amigável
  • df – Mostra informações de espaço em disco
  • du – Mostra espaço em disco usado por diretórios
  • fdisk, sfdisk – Informações sobre partições
  • hdparm – Informações detalhadas sobre HDs
  • free – Informações sobre memória
  • swapon – Informações sobre memória virtual (swap)
  • cat /proc/cpuinfo – Informações sobre o processador
  • uname – Informações de versão do kernel, arquitetura e outros
  • lspci – Mostra informações sobre dispositivos PCI
  • lsusb – Mostra informações sobre dispositivos USB

DPKG – Debian Package Manager

Como lidar com os pacotes de programas que encontramos por aí na Internet, ou nos CDs das distribuições Linux? Quais os processos para instalar, remover e atualizar programas que estão no formato DPKG?

  • dpkg -i – Instala pacotes
  • dpkg -r – Desinstala pacotes
  • dpkg -l – Lista pacotes instalados
  • dpkg -p – Mostra informações sobre um pacote
  • dpkg -L – Lista os arquivos instalados de um pacote

RPM – RPM Package Manager

  • rpm -i – Instala pacotes
  • rpm -U – Atualiza pacotes
  • rpm -e – Remove pacotes
  • rpm -q – Consulta um pacote
  • rpm -qa – Lista todos os pacotes instalados
  • rpm -qi – Mostra informações sobre um pacote
  • rpm -ql – Lista os arquivos instalados de um pacote
  • rpm -V – Faz uma verificação de integridade em pacotes

Gerenciador de pacotes: apt

Utilizado em distribuições Debian, Ubuntu e seus derivados para instalar e remover programas.

  • apt-get update – Atualiza a lista de pacotes dos repositórios
  • apt-cache search – Procura um pacote por palavras
  • apt-get install – Instala pacotes de programas
  • apt-get remove – Remove pacotes de programas do sistema
  • apt-get upgrade – Atualiza todos os pacotes do sistema
  • apt-get dist-upgrade – Atualiza a versão da distribuição e todos seus pacotes
  • apt-get moo – Invoca os poderes da vaca

Gerenciador de pacotes: yum

Utilizado em distribuições Fedora, Red Hat e seus derivados para instalar e remover programas.

  • yum search – Procura um pacote por palavras
  • yum install – Instala pacotes de programas
  • yum remove – Remove pacotes de programas do sistema
  • yum update – Atualiza os pacotes do sistema
  • yum check-update – Verifica se há atualizações de pacotes disponíveis
  • yum list – Lista todos os pacotes instalados e disponíveis no repositório
  • yum list available – Lista os pacotes disponíveis para instalação
  • yum grouplist – Lista os grupos de pacotes instalados e disponíveis no repositório
  • yum groupinstall – Instala grupos de pacotes
  • yum groupremove – Remove grupos de pacotes do sistema

==========
Fonte: Marcos Arouca

Tags: , , ,

No Comments

Some Django tips and tricks pages that I’ve found helpful.

May 28

Posted by Kenji Yamamoto in Developer, Django, Linux

My current work involves working on some Web applications developed using Django. Although I’ve used Python much in the past, my experience with Django was quite limited. So I recently did some research to become more proficient with it, and will list below some of the Web pages that I found provided the most useful tips and tricks for when using Django.

  • Some Django tips: Although an older article, it also makes some good non-Django suggestions, like installing IPython and ensuring your project has a test suite.
  • Small Django tips from one newbie to another: Another older article, this one also emphasizes the need for unit testing, and gives some examples (with code) about how to go about this. It also discusses ways to manage frequent model changes during development.
  • Usefull tips to start a new project with Django: A slightly dated article that summarizes how to get started with Django, and well as some suggestions for when deploying a production Django application.
  • Django Tips: UTF-8, ASCII Encoding Errors, Urllib2, and MySQL: Gives useful tips about handling UTF-8 encoded strings. Although the project I’m working on thankfully didn’t make the mistake of using MySQL, this article does include some tips relating to string encoding and MySQL, which may be useful for some people.
  • Big list of Django tips (and some python tips too): This offers perhaps the greatest quantity of Django tips in a single page. It’s quite complete, covering areas such as deployment, configuration, templating and views, the model, testing, and so forth.
  • Tips for Scaling a Web App: While not completely Django-specific, it lists some good ideas for how to develop a database-backed Web application that scales well.
  • Django Tips: PIL, ImageField and Unit Tests: Gives some time-saving suggestions about using the Python Imaging Library with Django and unit tests.
  • Django Image Uploading: Tips and Tricks: Outlines how to upload images in Django apps, with some suggestions about how to solve some common problems.
  • 10 Insanely Useful Django Tips: I think the title of this article overhypes it somewhat. The tips are useful, but they are somewhat common-sense tips, as well. Although I haven’t tried it yet, this article did point me to django-debug-toolbar, which sounds like it might be useful.
  • ‘Practical’ tips for working with Django: Includes some suggestions regarding developing custom managers, wrapping generic views, and converting text to HTML before rendering the template.
  • Debugging Django: One of the more detailed articles I found suggesting some strategies for debugging Django applications.
  • Django development tips: Some ideas for setting up a long-running Django development server in a UNIX-like environment using GNU Screen. More advanced users of UNIX-like systems are probably familiar with this technique, but this article is still a useful reference and tutorial for newer users.
  • Django Tips – Unique Date Querysets: A quick suggestion about how to get all of the unique years and months for a data set such as the posts in a blog, or other timestamped data.
  • Favorite Django Tips & Features: This thread from Stack Overflow contains a variety of user-contributed tips. Some of them suggest software to use in conjunction with Django, including Jinja2.
  • Tips to keep your Django/mod_python memory usage down: Some deployment and configuration suggestions to reduce Django’s memory usage when using Apache and mod_python.
  • Django Doctest Tips: Some tips for testing Django applications using doctest. Suggests better ways to locate failures, to use conditionals, to check context variables, and to check content type relations.
  • djangotips on Twitter: I didn’t find the quality of these user-contributed tips as good as those from Stack Overflow or the other pages, but there were a few that seemed like they might be useful.
  • Django Tips, Vol. 1: Contains five tips covering topics like the difference between ‘blank’ and ‘null’, displaying multiple fields on the same line in the admin, and so on.
  • Django cheat sheet: Although this is a cheat sheet, and not really a Web page, this is one of the cleaner cheat sheets that I’ve seen. I’ve found it to be a useful reference so far.
  • Django performance tips: This article is also older, but many of its suggestions are very sensible and apply even when not using Django, such as using separate database and Web servers if possible, using PostgreSQL, and putting as much RAM as possible into the servers.

Of course, those are just a small sample of the many useful Django resources out there. But for those new to Django, reading through the articles about may help avoid some common pitfalls, as well as offer ideas to help become more productive while getting accustomed to Django.

Tags: , , , , , ,

No Comments