Posts Tagged tutorial

Criando sua própria distro Linux

Se você, algum dia teve a idéia de como criar sua própria distribuição Linux, eis aqui um norte!

LFS – Linux From Scratch, é um projeto, voltado ao tutorial passo-a-passo como construir sua própria distribuição, com suporte a livecd inclusive, toda a documentação esta em inglês, mas é um inglês de fácil entendimento!

O material fica disponível on-line no site!

Caso tenha se interessado por este desafio, clique aqui.

, ,

Nenhum comentário.

XUL – Desenvolva sobre o Firefox

A robustez e as múltiplas atualizações e gadgets que o Firefox dispõe, através de seus plugins, é de fato um marco entre os atuais concorrentes de navegadores!

Bom para desenvolver estes fabulosos canivetes suíços, teremos que conhecer o XUL, uma linguagem de marcação que utiliza uma série de normas tais como Javascript, CSS, DTD e RDF.

Existem sites com um conteúdo muito interessante, com referência desta linguagem:

XUL – Brasil (site com exemplos e referência em português)

twiki.dcc.ufba.br/bin/view/XUL/WebHome

XUL Planet (site internacional com vasto conteúdo em inglês)

www.xulplanet.com

Blog em Português com detalhe de um aplicativo da livraria Amazon:

weblogs.pontonetpt.com/pre/posts/1851.aspx

Página de jogos feitos para o Firefox:

games.mozdev.org/

Blog de Renato Rodrigues, criador do Orkut Tool Bar:

www.renatorodrigues.com/pt-br/orkutbar.php

Fica ai dica!

Abraços

Thiago Cantero Mari Monteiro

, , ,

Nenhum comentário.

Pendrives no Windows 98

Introdução

Todos nós sabemos que o Windows 98 tem esta deficiência com relação ao uso de

dispositivos de armazenamento de massa removíveis, ou os populares pendrives!

Isso é devido na época do lançamento do Windows não haver o interesse por parte da Microsoft, em produzir um driver genérico para a comunicação do dispositivo.Como é presente no Windows 2000, cujo o suporte já é bem melhorado.

O leitor que esta vendo esta dica, perguntará, “Tá bom, disso eu sei!E ai!?”.

Bom, se você como eu, teve que encarar máquinas antigas, as quais possuem usb, e você tem pressa para salvar uma informação e outro tipo de coisa, sabe o quanto é difícil e trabalhoso, caso você não esteja em um ambiente de rede por exemplo, tendo que por vezes até gravar um cd ou utilizar os antigos disquetes!:(

Depois de várias experiências, encontrei um driver genérico para WIN98 (Primeira Edição) e WIN98SE(Segunda Edição), que funcionou como uma mão na roda!

Instalação

Antes de tudo o hardware que utilizei na instalação:

Placa Mãe Asus A7v266

Atlhon XP 1.7 Ghz

256 MB RAM

HD 40 GB

O Driver é encontrado neste endereço: http://www.technical-assistance.co.uk/kb/usbmsd98.php, lá você encontra as versões para o WIN98FE(Primeira Edição) e WIN98SE(Segunda Edição), eu baixei a versão 3.1.2 Beta English, funcionou perfeito!

Após baixar o arquivo, execute-o e reinicie o Windows, feita a reinicialização, plugue o diapositivo na porta usb, ele pedirá um driver referente ao dispositivo, aponte o caminho do driver no diretório criado na extração do arquivos do driver (“/Uw98Fe”), no caso da Rrimeira Edição do Win98, aguarde a instalação e pronto!O dispositivo esta pronto para o uso!!!

Confira algumas fotos:

Windows Explorer

Gerenciador do Dispositvo USB (Driver em inglês)

Foto da Barra de Ferramentas

Bom senhores, é isso ai!

Espero ter ajudado!

Fiquem com Deus

Abraços

Thiago Cantero Mari Monteiro

, , ,

Nenhum comentário.

Exemplo básico de formulário com Flex

Olá pessoal, tenho tido experimentos com o Adobe Flex, inclusive com a IDE Adobe Flex Builder, que torna ainda mais fácil a integração dos objetos e do código, otimizando e deixando de maneira mais dinâmica a criação de novos aplicativos.

Bom o que eu irei deixar aqui no blog é apenas um exemplo para aqueles que assim como eu estão engatinhando no Flex, pode ser um exemplo simples, porém a idéia aqui é trazer o conceito do Flex, pois como toda outra linguagem tem conceitos diferenciados, bem como outras linguagens, como Java, PHP, ASP, entre outras.

Para aqueles que já conhecem os formulários HTML e a manipulação dos dados do Javascript, notará semelhança entre ambas as linguagens, mesmo porque elas são de mesma origem, ou seja, da parte de marcação no caso do Flex a linguagem é o MXML (utilizando a mesma estrutura de tags do XML), e o Action Script 3.0 (que possui similidariedades do javascript, c, java, etc.).

Bom o algoritmo aqui é simples, nós iremos criar um formulário de texto, o qual iremos inputar valores que serão agregados em uma variável de tipo String, e um botão para acionar a função para que se abra uma tela de alerta, contendo o valor da variável inputada no campo.

Vamos ao código:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” height=”110″ width=”275″>

<mx:TextInput id=”msg” x=”-5″ y=”31″/>
<mx:Button label=”Exibir” click=”mensagem()” x=”163″ y=”31″/>

<mx:Script>
<![CDATA[
import mx.controls.Alert;

var texto:String;

private function mensagem()
{
texto = msg.text;
Alert.show (texto)
}
]]>
</mx:Script>

</mx:Application>

Agora vamos explicar o código:

Toda aplicação Flex inicia com a tag <mx: Application> e fecha com a mesma, por padrão no Flex Builder ele já vem no topo do código, portanto não se preocupe.

Para que se crie um formulário, utiliza-se a tag <mx:TextInput id=”<nome do campo>”>;

O botão é gerado a partir da tag, <mx:Button label=”<nome e ou referência do botão>” click=”<evento para chamar uma função(similiar o onclick do javascript)>”

Bom até aqui vimos o MXML, agora veremos o Action Script, para isso nós utilizamos as tags:

<mx:Script>

<![CDATA[

Código ActionScript aqui

]]>

</mx:Script>

Bom, até aqui nada de novo, mas há detalhes aqui que fazem toda a diferença!

Para gerar um alerta como no javascript, no Flex devemos importar o obejto da biblioteca, assim como fazemos no Java, pois a linguagem é muito voltada a orientação a objetos. Para isso nós fizemos assim:

import mx.controls.Alert;

Há modificações na declaração de variáveis, no exemplo que estamos expondo aqui, variável texto é declarada como String, desta maneira:

var texto:String;

A variável tem como sufixo os dois pontos “:” aliada com o tipo de variável, no caso do Flex, podem existir estas possilidades:

int = Para valores numéricos inteiros;

Number = Para Números Reais;

String = Para textos.

Após isso fizemos o método com o intuito de exibir a mensagem, contendo os dados obtidos através do formulário:

private function mensagem()

{

texto = msg.text;
Alert.show (texto)
}

Se caso você seguiu estes passos o resultado será este, como  foto abaixo:

Bom espero tê-los ajudados, aproveitando o gancho, muitos dos conceitos que estou desenvolvendo devo a este livro:

de Autoria de Daniel Pace Schmitz,  que é colunista do site Imasters, contendo principais conceitos e com exemplos muito bons, de forma clara e muito bem comentada, adquiri o meu na Saraiva MegaStore do Center Norte, mas creio que deve ter nas melhoers livrarias também, pois é da editora Brasport.

Fiquem com Deus

Abraços,

Thiago Cantero Mari Monteiro

, ,

Nenhum comentário.

Dicas de CSS3 – Na prática

Resolvi traduzir parte do tutorial, sobre as novas especificações do CSS3, e explicando o código detalhadamente.

A observação importante que tratarei neste caso é de que só funciona os códigos no Firefox versão 3 em diante ou no Safari, pois utiliza como engine de interpretação de hipertexto o webkit.

Infelizmente não obtive êxito com o IE, mas em breve creio que deverão haver correções a respeito.

Bom vamos a primeira opção de criarmos bordas arredondadas:

[sourcecode language='css']

.borda {

background-color: #666;
color: #fff;
line-height: 20px;
width: 200px; background-color: #666;
padding: 10px;
-moz-border-radius: 10px;
}
[/sourcecode]

Referencie em um parágrafo em seu html como o exemplo abaixo:

<p class=”borda”>CSS3 – Borda Arredondada</p>

O Resultado que você irá obter será o seguinte:

Agora vamos a explicação do código:

background-color: #666;

Esta linha Define a cor do plano de fundo de sua borda.

color: #fff;

Esta Linha Define a cor do Texto.

line-height: 20px;

Aqui é definida a largura da linha da borda.

width: 200px; background-color: #666;

Aqui define a largura da borda.

padding: 10px;

Define a altura da borda.

-moz-border-radius: 10px;

Eis aqui a tag mais importante, pois aqui esta referenciando que a borda seja arredondada (border radius), mas atentem ao “-moz-”, justamente este comando caracteriza criar uma borda arredondada no firefox.

Agora também podemos criar bordas com efeito gradiente com muita facilidade:

<style>
.box{
border: 8px solid #000;
-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
width:400px;
}

</style>

Coloque em seu html um tag assim:

<p class=”box”>TESTE EM BOX GRADIENTE</p>

O Resultado que você irá ter é o seguinte:

Agora vamos a explicação do código:

A primeira linha define o contorno da borda, a segunda linha define as cores da linha de baixo da borda (bottom), a terceira define as cores da linha de cima (top), a quarta define as cores do lado esquerdo(left), a quinta as cores do lado direito(right) e por fim a última linha define a largura do comprimento do box.

Atentem ao prefixo “-moz-” que serve para ser interpretado pelo mozilla, assim como também no css3 existe o webkit, utilizado no Safari!!!

Vimos que o css3 veio com muito mais recursos para nós desenvolvedores, facilitando nossa vida e ampliando nossas possibilidades!

O material original pode ser encontrado aqui.

Do mais agradeço a visita e espero ter sido útil.

, ,

Nenhum comentário.