Um Manifesto!

Bom, seguindo o meu poste anterior aqui no blog, sobre o quão útil é o terminal no linux, vou hoje apresentar um recurso deveras poderoso.

VIM (Vi Improved) é uma poderosissima IDE para programadores e um incrivel editor de texto. É pau para toda obra. Tem syntax coloridas, highlighting, autocompletação ( autocomplete ), identação, etc etc etc... tudo que tem que ter numa IDE.

Ele roda direto do terminal e possui versões gráficas(que eu nunca usei para falar sobre), basta digitar "vim" e começar a aprender. Por ser um editor por linha de comando, muitos vão estranhar a "falta" de recursos. Mas acreditem, recurso é o que não falta.

Primeiro vamos quebrar o costumo do mouse, você obviamente não vai usa-lo. Para quem gosta do teclado é muito bom, basta gravar uns poucos comandos e a edição fica muito acelerada.

Sem dúvidas o mais dificil foi se acostumar com os diferentes "modos" do VIM, o modo de comando e o modo de inserção onde você realmente edita o código. Abra o vim, como parametro você pode passar um ou mais arquivos para editar, caso esses arquivos não existam quando você salva-los vai se criar os arquivos.

Para alterar para o modo de inserção aperte a Tecla INSERT do teclado, e basta apertar o ESC para voltar  ao modo de comando. Quando você está no insert, isso fica escrita no fim da tela. No modo de inserção basta se navegar com os cursores e editar o que achar necessário.

Mas no modo de linha de comando é que reside o poder do vim, basta apertar ESC  para usa-lo. Para navegar pelo documento você pode usar o cursor normalmente, ou as teclas "h"(esquerda), "j"(cima),"k"(baixo) e "l"(direita), assim como "END" "HOME" "PAGE UP" e "PAGE DOWN".
Exemplos dos commandos mais básicos do Vim, precedidos por dois pontos(" : ") :
    :q -> Sai do editor
    :w -> salva o arquivo atual
    :n -> avança para o proximo arquivo
    :rew -> volta ao primeiro arquivo aberto

Esses são obviamente os mais simples. Você pode também por exemplo fazer buscas e marcações no documento. Para buscar um termo basta você digitar "/" seguida do termo e pressionar enter, e o vim o levara a proxima ocorrencia do termo, exemplo: se você esta editando uma classe com n funções e deseja ir rapidamente a uma determinda função:
    /function add_comment -> vai procurar pela funcao "add_comment", porque o termo é "function add_comment", assim para qualquer texto.

E outro recurso simple muito útil é a marcação de texto, você define uma especie de bookmark, um marcador mesmo, para o qual fica mais rapido e facil voltar, caso esteja editando dois blocos de texto em lugares diferentes do arquivo. Supondo que você que chamar o primeiro marcador de "n", basta posicionar o cursor aonde o marcador deve ficar e , no modo de comando, digitar "mn", o "m" define que sera um marcador, o "n" é o nome do marcador. Você pode criar até 26 marcadores, e para ir a um marcador basta usar, no modo de comando, "'n" " ' "(aspas simples) diz para ir ao marcador "n". Sem dois pontos esses casos.

Isto é apenas o mais básico para se começar a usar o editor e ir se acostumando com o mesmo, pretendo ainda falar mais sobre os dicionarios, autocompletar, syntax, hightlight, os recursos de compilação e o que lhe torna realmente bom como IDE, mas do que como editor texto.

Referencias:

•  vivaotux.blogspot.com -> Tem uma série de posts sobre o vim, bem legais
• vivaolinux.com -> também tem muita coisa.
  
• vim.org/tips e vim.org/scripts -> Acho que não preciso falar...

Vocês dão valor ao terminal? Se não, deveriam... os recursos são o MAXIMO.

Usuarios windows podem não entender, mas não importa o quão as interfaces gráficas evulam (se evoluem), quantos efeito, firulas e funções se acumulem nas interfaces, o terminal sempre vai deter o poder maximo! Se você usa linux atualmente, você pode ter uma experiencia incrivel sem nuncar usar o terminal, usuarios leigos não precisam mais se preocupar com "linhas de comandos" tudo pode ser feito facilemente e magicamente direto da interface gráfica. Isso já é fato, e o mito deve ser derrubado.

Mas para quem conhece um pouco só o terminal, entende a facilidade que ele proporciona. Depois de acostumar com a "tela preta", e entender alguns comandos basicos, a praticidade é incrivel de realizar as mais variadas funções com o menor esforço e tempo. Por isso vemos em foruns de ajuda e etc as pessoas respondendo duvidas de usuarios leigos começando com "Abra um terminal e digite...", por que é muito mais facil e rápido assim, apesar do usuario leigo não entender e que fosse melhor, nesse momento, explica para usar o aplicativo "X".

A flexibilidade do uso de terminal também é incrivel, você pode fazer como quiser e o que bem entender. O verdadeiro dominio do SO, na minha opnião, esta em dominar o terminal. A única dificuldade inicial é realmente aprender alguns comandos, mas existem textos em toda a internet para tal, não aprende que não quer. --help ou man para todos!

Isso acontece porque na verdade a maioria dos comandos são na verdade aplicações reais, com inumeros recursos e extremamente avançadas, e se não você esta lidando direto na linguagem de programação, na maioria dos terminais padrões BASH ou SHELL, que são bem faceis.

Dentre comando ja indispensáveis ou muito úteis posso citar o "dd", que cria uma copia fiel de ... qualquer coisa! Hds, partiços arquivos etc etc. O "mount" também, especialmente para montar isos, e falando em iso, tem o "mkisofs" para criar iso. Tem o "top", o "kill", "pipes". Fora algumas apliação "modo-texto" que são show de utilidade e produtivida. Como os simplesmente incriveis "VIM" e o "rsync". Entre tantos outros.

Que tal dar uma reforçada nos seus javascript e entender/aprender um recursos bem legais!

Primeiro, isso não é AJAX, AJAX usa esses recursos, isso é apenas JavaScript, apenas não... isso É javascript, e sua poderosa DOM API.

O que é? Bom DOM(Document Object Model) é  uma representação da hierarquia da pagina, e o que faremos aqui é manipular essa estrutura com javascript. Para isso é necessário um documento bem formatado e uma noção de padrões para que tudo funcione como deve, e de preferencia um pouco de orientação a objetos.

Um Exemplo do uso do DOM pode ser visto aqui mesmo no Manifesto, no alternador de css. 

O Básico

Elemento é uma tag em geral, um objeto no HTML. Vou me referir assim daqui por diante. Vamos a algumas funções básicas:

• getElementById("id") -> retorna o objeto com o "id" dado. Uso: document.getElementById("id") ;
• getElementsByTagName("name") -> retorna uma array de elementos "name", esse "name" seria o nome da tag ex. para tag <a href="#"> o "name" é "a".
• getAttribute("name") -> retorna o valor do attributo "name" de um determinado objeto. Uso: document.getElementById("id").getAttribute("name") ;
  
• setAttribute("name","valor") -> Altera o valor do atributo "name" para "valor", uso igual ao acima.
• removeAttribute("name") -> Remove por completo determinado atributo do elemento.

Um pouco mais de definições, um elemento "filho"(child) é aquele que esta contido dentro de um elemento "pai"(parent). No exemplo fica mais claro:

<body> <div id="exemplo">

<p> texto texto texto </p>

<p> texto texto texto </p>  

</div> </body>

 No exemplo acima, a tag <body> é pai da <div id="exemplo">, que por sua vez é pai das tags <p> . No caminho contrario, ambas os <p> são filhos da <div id="exemplo"> que é filha do <body> . E assim continua internamente no documento.

• createElement("name") -> Cria um elemento chamado "name", que ainda não esta na pagina, uso: document.createElement("name")
• appendChild("name") -> Adciona um "filho" "name", criado por createElement, a um elemento, uso: document.getElementById("exemplo").appendChild("name") ;
• createTextNode("texto") -> cira um "nó" de texto, um texto comum digamos.

Isso é apenas o básico, para entendermos melhor vamos usar algum exemplo:

Exemplo:

Bem simples. Supondo que eu tenha uma pagina com o seguinte código assim:

<ul id="primeira_lista" class="alteravel">

    <li class="classe_antiga"> Item 1 </li>

    <li class="classe_antiga"> Item 2 </li>

</ul> 

 E eu quero uma função para adcionar itens a essa lista, de forma a terem um texto especifico e um formatação especifica, vamos a função, porem apenas as listas alteraveis:

function adciona(txt) {

                                                                // passa como paramtro o texto a ser incluso
    var ali = document.createElement("li");         // Criamos um objeto li
    ali.setAttribute("class","novo_item");             // atribumos uma classe a ele
    var texto = document.createTextNode(txt);     // criamos um texto
    ali.appendChild(texto) ;                             // adciomos o texto ao elemento li
   
    listas = document.getElementsByTagName("ul") ; // aqui pegamos todos os elementos ul em uma array
    for(i=0;i<listas.length;i++){
                                                                    // criamos entao um loop atraves dessa array
        classe = listas[i].getAttribute("class");         // recuperamos o valor do atributo classe
        if(classe == "alteravel") {
                                                                    // Caso o valor de classe seja alteravel adcionamos o novo elemento
            listas[i].appendChild(ali);
        }       
    }

} 

 Agora basta chamar a funcao adciona(txt) , sendo txt o texto a ser adcionado, que este sera adciona a todos a lista não ordenadas (ul) que foram da classe "alteravel", e estes novos itens receberao a classe "novo_item".

 Apartir disso basta usar a criatividade e se divertir! Existem ainda muitos outros recursos, uma boa referencia é o post do elcio sobre DHTML. 

Dúvidas é só se manifestar!

Esse sábado adiquiri o DVD do Debian 4, prefiro ter o dvd por ter os pacotes a mão em qualquer caso e qualquer lugar que eu instalar, gostaria ate de ter os 3 DVDs, mas o primeiro já é o bastante. Empolgado ao chegar em casa resolvi fazer a instalação.

Já me preparei psicologicamente para a instalação, pensando que poderia registrar os passos de encarar o desafio. DVD no Drive, boot, resolvi testar a interface gráfica, para ver algo novo e compartilhar com a galera, "installgui". E bem a instalação foi... como dizer? ........ Chata!  Foi Fácil demais!!!! Nada que pensar muito! E ainda tem esse botão para tirar fotos da tela, que já ficam salvas no seu novo Debian!

É tudo bem intuitivo. Ele entra e tem essa interface tranquila, você escolhe a linguagem e mapa de teclado, e fica clicando em "Continuar", "Continuar", "Continuar", "Continuar", "Continuar" ...e é só ler o que vier, se perguntar seu nome, escreva, senha é só escolher... não tem nada demais, só ler. 

Bom tem a parte do particionamento, escolhi manual , selecionei o HD, só tinha um mesmo, a ultima partição (antigo debian sarge) montar como "/" root, "continuar", "continuar" ...aja vem o ambiente gráfico selecionado... e pronto ele instala.

Terminada a instalação, você já tem um ambiente completo, basta agora abrir o gerenciador de pacotes synaptic e escolher o que mais precisa... feito isso, é só diversão!

Veja minha screenshot do desktop, aqui tudo é o que vem padrão no DVD, exceto pelo plano de fundo :D

Ele já vem extremamente funcional, pacotes ótimos atualizados. O Iceweasel, substituto do firefox no debian, funciona perfeitamente bem, tem até a webdeveloper traduzida no apt-get! E eu achei bem mais rápido que o FF normal. O sistema esta bem mais rápido em tudo, e com a estabilidade e confiabilidade de sempre.

Aconselho a todos testar o GNU/Linux Debian 4.0 Etch, sem dúvidas é muito bom, extremamente fácil de usar e atualizar, muito intuitivo!

 Enjoy!

Primeiro algumas considerações: Isso vai reforçar o uso de padrões web(webstandarts) nas paginas, por que o que acontece é ,  o script faz alterar a folha de estilo css ativa da pagina, ou seja, apenas vai carregar outro arquivo .css . Logo para que isso tenha o efeito desejado é necessário que o html seja semântico, pois assim pode-se usar css padronizados. Um mesmo (x)html, varios css .

Apesar do exemplo simples(não sou tão designer assim), o Manifesto é feito dessa forma, ele é gera apenas blocos simples de codigos XHTML. O layout todo é aplicado via css, posso fazer o layout que quiser(e minhas imagens permitirem) apenas por css. Um exmplo ótimo é o ZenGarden, todos os modelos de layout são apenas arquivos css diferentes, as imagens e etc são carregadas pelo css, e em todos usa-se o mesmo código (x)html. Entendem a importância dos padrões e layout css? Entre outros fatores...

Vamos ao trabalho então?

Aqui também aplicamos o uso de DOM,  e dos poderes do javascript, usando sua API de DOM, que você pede entender melhor nesse link muito bom. Resumindo um pouco é a capacidade de ler/alterar a estrutura da pagina, como pegar tags, atributos e conteúdos, muuuuito usado no dito AJAX e muitas vezes em RPCs também.

Primeiro vamos entender como carregar os estilos na pagina, vamos usar as tags "link" com rel="alternate stylesheet". Isso é o que carrega o css na pagina, para cada css vamos definir um "title", que usaremos para chamar esse arquivo. O "rel" é para que esse nao seja carregado, ele fica desabilitado. Usando todos os estilos assim, sua pagina sera carregada sem estilo (Ele é semântica? sem problemas então), e um estilo sera chamado com o script.

<link href="extras/estilos/segundo.css" rel="alternate stylesheet" type="text/css"  title="Dark" />

O código mágico é esse aqui:

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// by http://www.manifesto.blog.br/
    var padrao = "Basico" ;
            function troca(txt) {
                var i, a, main;
                 for(i=0;(a = document.getElementsByTagName("link")[i]);i++) {
                    if (a.getAttribute("type") == "text/css") {
                        a.disabled = true ;
                        a.setAttribute("rel", "alternate stylesheet") ;
                    }
                }
                for(i=0;(a = document.getElementsByTagName("link")[i]);i++) {
                        if (a.getAttribute("type") == "text/css" && a.getAttribute("title") == txt) {
                            a.disabled = false ;
                            a.setAttribute("rel", "stylesheet") ;                
                        }
                    }
                setCookie("estilo",txt,"99");
            }           
            function start() {
                var txt = getCookie("estilo");
                if (txt == null) { txt = padrao ; }
                troca(txt)
            }           
            function setCookie(c_name,value,expiredays) {
                var exdate=new Date();
                exdate.setDate(exdate.getDate()+expiredays);
                document.cookie=c_name+ "=" +escape(value)+
                ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
            }                                           
            function getCookie(c_name) {
                if (document.cookie.length>0)
                  {
                  c_start=document.cookie.indexOf(c_name + "=");
                  if (c_start!=-1)
                    {
                    c_start=c_start + c_name.length+1;
                    c_end=document.cookie.indexOf(";",c_start);
                    if (c_end==-1) c_end=document.cookie.length;
                    return unescape(document.cookie.substring(c_start,c_end));
                    }
                  }
                return "";
            }               
            window.onload = start ;    //////////////////////////////////////////////////////////////////////////////// 

Explicando:

1. A variavel "padrao" é o css a ser carregado caso nenhum esteja ativo.
2. A ultima funcao, start(), deve ser chamada noo body.onload(). Esta cuida de usar o ultimo css selecionado ou o padrao.
3. A funcao troca(txt), cria um loop atraves dos links, verifica quais possutem o atributo "type" como  "text/css" usando o getAttribute e desativa todos (a.disable) e, para o ie, altera o "rel" com setAttribute para "alternative stylesheet". Entao procura pelo pelo titulo e o ativa.
4. As funções de cookies são para salvar e resgatar a ultima opção de css escolhida.
5. Para alterar o css, basta chamar a funcao troca(txt) passado o txt com o title do css escolhido.

Um exemplo de uso é o menu Layout do manifesto. Você pode ver o código no fonte, guia rápido das funções usadas:

• document.getElementByTagName() -> Cria um array dos elementos no documento com essa tag, na ordem apresentada no documento.
• document.Seu_Elemento_Aqui.getAttributo() -> Retorna o valor do atributo de seu elemento selecionado.
• document.Seu_Elemento_Aqui.setAttribut() -> Altera o valor de seu elemento.
• document.Seu_Elemento_Aqui.disabled -> Valor, true ou false, do atributo disabled.

Quando referencio a.disabled , "a" ja esta definido como document.getElementByTagName("link)[0], ou seja é o primeiro elemento do meu documento com a tag "link".

Bom, básicamente é isso. É muito interessante o estudo de DOM e JavaScript, vale a pena eu aconselho, as possibilidades são infinitas, isso é um grão de area numa praia de possibilidades e eu ainda estou aprendendo. O Google entendeu o poder, e usa e abusa do mesmo em seus serviços.

Caso alguem tenha alguma sugestão ou estiver tendo problemas com isso eu fico feliz em ouvir e ajudar... alguem tem algo a dizer?