Poderosa IDE VIM
Wednesday, 06 February 2008 23:33
administrator
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: Bom proveito! E em breve mais...
|
O Incrível Terminal do Linux
Wednesday, 06 February 2008 23:32
administrator
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. Isso tudo apenas para monstrar parte do poder contido dentro do sistema... muitas vezes esquecido, deve dar muito valor ao terminal. Não deixem passar a oportunidade de entender a principal ferramente do Linux!
Javascript DOM API
Wednesday, 06 February 2008 23:32
administrator
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.
Sobr pais e filhosUm 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!
Last Updated on Friday, 02 May 2008 14:57
Fácil demais instalar o Debian 4 Etch
Wednesday, 06 February 2008 23:31
administrator
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!
Alternador de Estilos CSS
Wednesday, 06 February 2008 23:31
administrator
Um truque interessante que aprendi esses dias, como alterar sua folha de estilo, e todo o layout da pagina, atraves de javascript. 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: - A variavel "padrao" é o css a ser carregado caso nenhum esteja ativo.
- A ultima funcao, start(), deve ser chamada noo body.onload(). Esta cuida de usar o ultimo css selecionado ou o padrao.
- 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.
- As funções de cookies são para salvar e resgatar a ultima opção de css escolhida.
- 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?
Linux em um Pendrive
Wednesday, 06 February 2008 23:29
administrator
Bem, minha experiência essa semana tem sido instalar e rodar um linux apartir de um pendrive. No começo da semana adiquiri um pendrive já com isso em mente, além do armazenamento de arquivos. Como pretendo ainda assim armazenar um boa quantidade de arquivos optei por uma distro compacta, uma em especial que ja estou acostumado, e ja salvou meu pc varias vezes, escolhi o DamnSmallLinux. Mas isso pode ser feita com qualquer distro, acredito eu. Para esse fim eu aconselho o DSL ou o Slax. Fiz uma bela pesquisa ne internet e fiquei com alguns links muito úteis, são eles: Existem boas razões para quere ter uma distro linux no pendrive, dentra eleas: Um Sistema portatil; 100% Personalizado; com segurança; e estabilidade.
Você vai precisar da iso do DSL, que pode ser obtida no site do mesmo, e do syslinux instalado. Sem mais enrolação, vamos ao trabalho: Antes de tudo, tenha certeza de ter backup dos arquivos. E também, substitua sempre os nomes aqui pelos equivalentes do seu pendrive, ex: o meu pendrive é reconhecido como /dev/sda , caso o seu seja /dev/sdb use sempre esse nome. "fdisk -l" em um terminal lhe diz esses dados. Formatando o pendrive: Eu pulei esse passo, pois não queria perder os dados no pendrive, mas caso haja necessidade ai esta. Abra um terminal e ,como root, use "cfdisk /dev/sda". Apague as partições que existirem e crie uma nova. Após torne essa partição em FAT32, para isso use "mkfs.msdos /dev/sda1". Montando o sistema: Montamos a partição, como root: cd // vamos para home de root mkdir pen // cria uma pasta para montar o pen mount /dev/sda1 -t vfat pen // monta o pendrive
E então precisamos da iso do DSL, para monta-la e copiar os arquivos para o pendrive mkdir iso // cria pasta para o iso mount -o loop /home/dsl/dsl-3.3.iso pen // monta a iso, substitua pelo caminho correto cp -a iso/* pen // copia o conteúdo da iso para o pendrive
E vamos preparar também um diretório para receber as extensões e etc: cd pen // entra na pasta mkdir mydsl // receber os .dsl mkdir opt // para uma pasta opt persistente mkdir opt/bin //para o opt ficar no path
Customizando: No caso do DSL caso queira personalizar agora basta deixar as extensões que baixar na pasta "mydsl" e ouros programas(como firefox, eclipse, java etc...) na pasta opt e deixar um link para chama-los em opt/bin que o dsl vai reconhece-los automaticamente. Chegamos a um ponto suficiente para rodar a partir do seu pendrive, porem ainda sem poder dar boot do mesmo. De um cd, ou de um disquete, de boot você pode agora carregar a imagem do seu pendrive com os arquivos a partir da seguinte linha "dsl fromhd=sda1 opt=sda1 restore=sda1" , com outras opções que queira, o "restore" garante que recarregue e salve as alterações e personalizações em arquivo no pendrive. Boot apatir do pendrive: Agora prepararemos o pendrive para poder dar boot a partir dele, usando o syslinux: cd pen // entra na pasta mv boot/isolinux/* ./ // copia os arquivos necessários mv isolinux.cfg syslinux.cfg // renomeia, sera necessário umount /dev/sda1 // desmonta o pendrive syslinux /dev/sda1 // configura para boot, opcional -s
Pronto, seu sistema está pronto e já pode dar boot, via USB-ZIP ou USB-HDD... mas nós podemos fazer melhor né? Limpando os restos, mount /dev/sda1 pen // montamos de novo cd pen // entra na pasta rm -Of f2 f3 logo.16 isolinux.bin index.html boot.cat german.kbd lost+found // Remover o que não precisa
Agora, vamos configurar as opções de boot do pendrive. Para isso abra com um editor de textos o arquivo syslinux.cfg, aqui sempre use sda1, e deixe-o da seguinte forma: #################################### DEFAULT linux24
APPEND mydsl=sda1 opt=sda1 restore=sda1 frugal noeject ramdisk_size=100000 init=/etc/init lang=br apm=power-off vga=794 initrd=minirt24.gz nomce noapic quiet BOOT_IMAGE=knoppix
TIMEOUT 300
PROMPT 1
DISPLAY linux/boot.msg
LABEL dsl
KERNEL linux24
APPEND mydsl=sda1 opt=sda1 restore=sda1 frugal noeject ramdisk_size=100000 init=/etc/init lang=br apm=power-off vga=794 initrd=minirt24.gz nomce noapic quiet BOOT_IMAGE=knoppix ################################## Isso diz para o dsl usar os arquivos da pasta opt e mydsl e gravar as alterações no pendrive com o restore, o vga é a resolução de tela e. O arquivo boot.msg é a mensagem inicial quando carrega o boot. Pronto seu sistema está pronto(agora sim!), basta copiar os .dsl que queira carregar para a pasta mydsl e se divertir. Pretendo ainda melhorar esse sistema, quem sabe usando duas partições distintas e colocar também o Slax. Mas por hora é só... continua em um próximo post. Qualquer duvida ou problema, ficarei feliz de ajudar! É isso... Lembre-se apenas de configurar a BIOS para dar boot via USB!
Last Updated on Sunday, 09 November 2008 21:03
|
|
