All posts by Fabiano Pereira

• Designer • Web Designer / Developer • Professor Web [Microcamp-SBC] • Músico [guitar/vocals Overtime] • Curioso de Plantão
Arte

Software livre para web: Desenho vetorial com o Inkscape

4 Comments

Este artigo faz parte da série sobre a migração progressiva de usuários de softwares proprietários para desenvolvimento web, para ferramentas livres, baseadas em ambiente linux.

A idéia da transição progressiva subentende o conhecimento passo-a-passo de novos recursos, com um mínimo de mudanças no início.
Neste artigo, irei mostrar como instalar e configurar o inkscape, utilizando uma versão para windows. Na verdade, não existem grandes diferenças entre esta versão e a do linux, o que facilita o processo de transição consideravelmente.

Siga estes passos afim de conhecer uma nova ferramenta, destinada ao desenho vetorial, sendo um equivalente, no mundo do software livre, aos programas Corel Draw, Illustrator e outros:

1) Instalando o programa
inkscape_install.jpg
Siga este link e instale a versão para windows do Inkscape. A instalação é tranquila, sem maiores problemas, bastando seguir as opções da tela. Nada muito complicado. Lembre-se que não será necessário nenhum serial ou arquivo de crack! 😉

2)Conhecendo a Interface

interface.jpg

Do you like Corel Draw?
Se sim, logo de cara vai se sentir familiarizado com a interface do programa, bastante parecida com a interface do Draw, inclusive no que diz respeito ao posicionamento das paletas, recursos e outros. Vejam, não estou dizendo que é igual, mas sim semelhante. Mais um ponto a favor para a migração progressiva e indolor, sobretudo para aqueles enquadrados na categoria de fãs do corel (na qual eu NÃO me incluo!).

3) Tutoriais de Inkscape:
Conheça mais sobre a ferramenta, suas utilizações e tutoriais nos seguintes links:
Tutorial básico Inkscape (download)
Primeiros passos com Inkscape
Desenhando o logo do Ubuntu com Inkscape

No próximo artigo, tutorial completo de vetorização de imagens com o inkscape. Até lá!

Arte

Software livre: tendência do mercado web.

7 Comments

O software livre é uma tendência forte no mercado web, trazendo grandes benefícios para os seus utilizadores, proporcionando uma solução livre de licenças que funciona num ambiente aberto e livre de vírus, cds piratas, downloads suspeitos (de sites mais suspeitos ainda) e versões “crackeadas”.

Porém, nunca é demais lembrar,(especialmente para usuários de windows e apple) que não existe Photoshop, Illustrator, Flash e outras aplicações comuns e proprietárias do design e da web para linux.
Os usuários linux utilizam versões aproximadas dessas ferramentas, obtendo os mesmos resultados desejados no “fazer” web, de uma maneira geral.

Em alguns casos, a utilização de emuladores (softwares especiais que funcionam no ambiente Linux “simulando” um ambiente windows) podem ser utilizados. Confira este artigo de Helton Eduardo e saiba mais sobre o emulador wine rodando dreamweaver no linux.

Afim de auxiliar na tarefa de escolher os softwares corretos para cada tipo de trabalho em desenvolvimento e criação web, bem como para traçar um comparativo entre softwares livres e proprietários para web, elaborei a seguinte lista:

a) Ilustrações, logotipos, símbolos vetoriais:
Inkscape (software livre)
Corel (software proprietário)

b) Criação de lay-outs, tratamento de imagens, otimização:
Gimp (software livre)
Photoshop (software proprietário)

c) Edição Visual do código:
NVU (software livre)
Dreamweaver (software proprietário)

d) Animações vetoriais:
Ktoon (software livre)
Flash (software proprietário)

e) Desenvolvimento:
PHP (Linguagem de Servidor Open Source)
ASP (Linguagem de Servidor Paga)

Observação: existem diversas outras ferramentas e linguagens no mercado que também efetuam tais trabalhos.

A ferramenta escolhida dependerá de uma série de fatores. Porém, analisando o ambiente competitivo de agências web, cabe ressaltar que a utilização de software livre para web é uma tendência forte.

Aos que trabalham com web, torna-se essencial o aprendizado dessas novas ferramentas, afim de se manterem preparados para o mercado de trabalho. A utilização do software livre traz efetiva liberdade para empresas de web, custos mais baixos de desenvolvimento e investimentos mais racionais.

Arte

Web 2.0, Andrew Keen e a democratização da informação

3 Comments

Lembro-me de ter lido a entrevista de Andrew Keen numa revista semanal brasileira. Suas provocações e teorias, em princípio, eram de alguém que tenta defender uma tese contrária referente a algo considerado “standard” para todos, ganhando, assim, algumas migalhas de fama e o prazer de não ser parte da maioria.

A tese defendida por Andrew Keen, diz respeito ao conceito colaborativo da web 2.0, que permite a participação efetiva de todos, colaborando mutuamente. Na concepção de Andrew Keen, este aspecto nos levará ao fim da cultura como conhecemos, trazendo à tona informações ruins de pessoas mal preparadas para escrever e refletir sobre os temas atuais.

Andrew Keen, ao que parece, defende a idéia de que precisamos de pessoas preparadas para expressarem nossas opiniões, anseios, necessidades. Segundo ele, não temos preparo intelectual suficiente para nos expressarmos, somos meramente sujeitos sem conteúdo, sem ter o que dizer, passivamente devemos esperar que os jornalistas altamente especializados, bem como os experts nas mais diversas áreas do conhecimento, nos digam o que fazer, pensar, sentir e como agir.

Isso me fez lembrar daquele grupo de cientistas que, recentemente, anunciou que o aquecimento global é um grande exagero, que não existe. Pensei na imagem de Bush radiante, era, enfim, um grande trunfo contra aquela “Verdade Inconveniente“. Imaginei, também, a mídia tradicional vibrando de emoção com o livro “The Cult of the Amateur“, enfim os blogs tomariam um soco no estômago!

A (r)evolução é urgente, necessária e está em pleno curso. Tentar freá-la é impossível, os modelos tradicionais de produção e disseminação de informação e cultura caíram por terra, o conteúdo colaborativo é um fato, necessita de ajustes e melhorias, porém sua solidificação é inevitável, a idéia do “povo falando por si” é forte demais para ser ignorada.

Houve um tempo em que o povo realmente precisava de pessoas intelectualmente preparadas para protestar, mostrar sua realidade. Os pequenos-burgueses, com seus violões, iam à favela, ao morro, chegavam na periferia e, arrebatados de uma grande dó, cantavam essa realidade em suas bossas, em seus sambas sofisticados, salvando (ou tentando salvar) o povo da miséria, da falta de expectativas.
Depois de algum tempo, o povo descobriu que poderia se manifestar por si próprio, seja por meio dos sambas populares, dos acordes furiosos do punk rock ou da batida forte do rap. Descobriu que era o mais adequado para expressar suas opiniões sobre situações reais, já que vivenciava aquilo tudo no seu dia-a-dia.

Traçando um paralelo, acredito que a web 2.0 traz a mesma possibilidade para vários e distintos públicos, seja qual for a área de conhecimento. Você pode criar um blog sobre um tema específico, sobre uma visão de vida, sobre opiniões e posicionamentos. Não precisa esperar que algum jornal te descubra, que algum programa te entreviste, ou que a tv te apresente como o mais novo talento.

Como em tudo na vida, é necessário separar o joio do trigo, com certeza nem tudo o que está em blogs e gerenciadores de notícias deve ser levado em consideração, sempre haverá a real necessidade de se comparar dois pontos de vista diferentes, o “mainstream” (grande mídia) e o “underground” (mídia independente, blogosfera), utilizando o ceticismo saudável, na busca pela informação real ou a opinião mais relevante.

Arte

Centralizando uma página com CSS

10 Comments

Uma dúvida muito comum de alunos e iniciantes: como centralizar o conteúdo numa janela de navegador? Realmente é um recurso bastante útil, já que aproveita o espaço de maneira uniforme e se adapta a qualquer tamanho de janela.
Veja, abaixo, um código que centraliza o conteúdo. Observe que as divs posteriores são criadas aninhadas, ou seja, dentro da div “conteúdo”:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Centralizando com CSS</title>

<style type=”text/css”>

html, body, #conteudo{height:100%;}

body{text-align:center;}
#conteudo{
width:796px;
border: 2px #666666;
position:relative;
background-color:#CCCCCC;
margin:auto;}

.esquerda{
position:absolute;
top:10px;
left:10px;
width:245px;
background-color:#00FF00;}

.centro{position:absolute;
top:10px;
left:265px;
width:245px;
background-color:#ffff00;}

.direita{
position:absolute;
top:10px;
left:520px;
width:265px;
background-color:#ccff33;}

.dentro{
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
width:245px;
color:#FFFFFF;
background-color:#000000;}
</style>
</head>
<body>

<div id=”conteudo”>
<div class=”esquerda”>
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />

<div class=”dentro”>
div dentro do div “esquerda!<br />
</div>
</div>
<div class=”centro”>
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
</div>
<div class=”direita”>Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento
</div>
</div>
</body>
</html>

Experimente este código em sua página e faça suas modificações. Teste, ele funciona nos dois browsers (ie e firefox) principais. ok?

Entendendo o código
Para se atingir este objetivo, a utilização de elementos div foi essencial. Observe o seguinte trecho do código:

html, body, #conteudo{height:100%;}

Aqui, os elementos html, body (o corpo da página, parte visível ao usuário) e a div id “#conteúdo”, tiveram suas respectivas alturas definidas como 100%, ou seja, independente do tamanho da janela do browser(navegador), elas ocuparam toda a altura disponível.

Já neste trecho:

body{text-align:center;}

O body é utilizado como seletor de css para centralizar o conteúdo geral. Na verdade, com esta atribuição, o elemento principal da página (#conteudo), estará sempre centralizado.

#conteudo{
width:796px;
border: 2px #666666;
position:relative;
background-color:#CCCCCC;
margin:auto;}

A div id “#conteudo” será utilizada como div principal, todas as outras divs estarão dentro (aninhadas) a ela. Assim, é possível controlar a centralização dos elementos. A largura, definida como “width:796px”, tem o tamanho ideal para resolução de 800×600. Foi definida uma borda (border: 2px #666666), por razões estéticas, o mesmo acontecendo com a cor de fundo (background-color:#CCCCCC). O posicionamento foi definido como relativo (position:relative;) à página (elemento html e body). A margem está definida como automática (margin:auto).

Note que as div criadas posteriormente (esquerda, centro, direita) são inseridas dentro da div “#conteudo”, ou seja, suas tags são abertas e fechadas dentro da div principal, fazendo com que elas fiquem “dentro” da mesma. Todas estão com o atributo “position:absolute;”, para que o posicionamento seja absoluto com relação ao elemento pai (“#conteudo”), não à página.

Finalizando, foi inserida a div “dentro”, inserida dentro da div “esquerda”, demonstrando que é possível inserir divs dentro de divs indefinidamente. Porém, com critério e organização.