DES 84 - Blog of DES84 Website

Existem milhares de vantagens para se aprender Actionscript 3, além de se manter no mercado que cada dia tem rookies - ganhando pouco e tomando o trampo dos experientes. Querendo ou não isso é uma realidade onde os medianos temem os novatos e por isso especializar é preciso, quanto mais PRO mais seguro está, claro.

No site DevNet da Adobe tem uma lista muito interessante de videos tuto para iniciantes na programação em AS3, realmente simples para se familiarizar com a nova linguagem e sintaxe do Actionscript3.

Link: Flash in a Flash - AS3

Depois de passar um tempo longe dessa caceta de blog ( caceta no sentido carinhoso da palavra, ou se preferirem no feminio que não posso escrever ) tive dando uma estudada em AS3 bem a fundo e comecei a procurar um AMF (Action Message Format) para fazer comunicação do Flash com banco de dados e assim alimentar as aplicações de forma mais rápida sem aquele taaaaaaaanto de arquivos PHP para acessar banco e outros mil para enviar dados ao Flash.

Entre as formas pagas (Flash Media Server) e o grátis eu fiquei com o FREE claro. O danado em questão é um programa, gateway, que interpreta as classes colocadas dentro dele e retorna de forma fácil os dados para a aplicação, executando até coisas simples como um form de e-mail.

AMFPHP é um programa feito em PHP, como está no próprio nome, coisa idiota, com uma interface gráfica (Browser) criada no Flex onde podemos executar as aplicações sem necessariamente rodar a aplicação em Flash. Como eu já havia dito é grátis, basta acessar o site do AMFPHP e clicar em download par abaixar a última versão do programa, basta copiar para o server dentro do diretorio que preferir - por default:

www.dominio.com/amfphp

Para visualizar a parte gráfica, o browser das aplicações, basta acessar o endereço:

www.dominio.com/amfphp/browser

Segue imagem (preview) do Browser abaixo:

Um exemplo simples para utilizar no AMFPHP é um form de email, onde nesse criamos um arquivo em PHP separado chamado de Email.php dentro dele criaremos a classe Email com a função _send como veremos no código abaixo:

<?php

class Email
{
        /**
        * Esse serviço ira enviar um formulario
        * @retorno true ou false se enviado ou nao
        */
        function send($to, $subject, $message){
                return mail($to, $subject, $message);
        }
}

?>

Com essa classe dentro do servidor dentro da pasta do AMFPHP, aperto dentro do Browser o botão de Refresh para visualizar a nova Classe “Email” criada essa pode ser executada dentro do proprio Browser somente preenchendo os campos ou do Flash que segue o source abaixo. Bem fácil de usar e não instala nada no servidor, vale a pena testar.

Source em Flash (fla): Download

Espero que gostem e até breve.

Nada seguro mas legal de trabalhar ehehe, um validador de dados com XML como um form de usuário e senha é nem interessante, como um dos meus ultimos projetos feitos em AS2. O sistema consiste em verificar se existe um campo de login e senha ao mesmo tempo com os mesmos dados digitados nos campos input no Flash.

A estrutura do XML é bem simples como segue abaixo:

<db>
    <cliente>
        <user>username</user>
        <pass>password</pass>
        <file>dir/file.extension</file>
    </cliente>
    <cliente>
        <user>username</user>
        <pass>password</pass>
        <file>dir/file.extension</file>
    </cliente>
</db>

Cada nó do XML, <cliente>, contem um usuário, senha e direcionamento. Assim, caso uma pessoa digite o valor correto tanto de usuário e senha ele será direcionado via getURL em nova janela para o endereço do arquivo estipulado no XML dentro do mesmo nó.

O projeto pode ser visto funcionando em: www.des84.com/projetos/validaXML, teste com o usuário “pablo” e senha “davi”.

Se gostaram comentem, se odiaram comentem também ( :

Source code (fla)

A ideia do resize na verdade é meio que criar uma mascara, uma area de visualização da imagem, assim ao passar o mouse sobre a imagem mostraria a tag <img> por completo, assim como segue o conceito abaixo:

O Codigo para a inserção da imagem já com o efeito de resize é bem simples e não joge muito do que temos hoje em webStandard:

<a href=”#”><img src=”image.jpg”  alt=”my image” /></a>

Veja o exemplo rodando ok na Demo page.

O estágio default em css para as imagens pequenas, thumbnails, é algo em torno do código abaixo, podendo, é claro, ser alterado de acordo com a necessidade do projeto:

ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;       
}
ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}

Usando posicionamento absoluto podemos então criar o nosso ‘fake crop’ na imagem, cada imagem deve ter um estilo proprio para o crop e mudando o posicionamento em top e left de acordo com a necessidade.

ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}
ul#thumbs li#image1 a img{
    top:-28px;
    left:-55px;   
}   
ul#thumbs li#image2 a img{
    top:-18px;
    left:-48px;   
}   
ul#thumbs li#image3 a img{
    top:-21px;
    left:-30px;   
}

e Finalmente para ativar o resize colocamos o codigo hover que vai fazer a imagem aparece toda:

ul#thumbs a:hover{
    overflow:visible;
    z-index:1000;
    border:none;       
}

Bom proveito a todos e qualquer dúvida não deixem de ler o post original que segue o link abaixo:

Link: Resize holover image with CSS

Como em um passe de mágica, ou um pouco menos lento que isso, espalharam-se pela internet os danados, e facilitadores, CSS Grids ou melhores nomeados de CSS Frameworks. No inicio desse processo todo eu comecei testando o 960Grid System e o Blue Print, muito bons mesmo, cada um nas suas especialidades. Hoje rodando pelos blogs da vida para animar a começar criar, o que foi dificil, encontrei um post muito interessante sobre os diversos tipos de CSS Frameworks encontrados pela rede.

No site Hidden Pixels .com encontrei uma lista bem completa para com os mais conhecidos frameworks de CSS da net, vale a pena baixar alguns testar e usar essa facilidade para montar layouts em XHTML.

Link: CSS Frameworks

Sempre, sempre jQuery, declaradamente meu framework preferido. Nomeado de Kwicks o sample foi todo desenvolvido em jQuery, mais um plugin muito r0x e muito simples mesmo de utilizar, um salve para Jeremy Martin.

Usando de um menu simples feito em lista (ul):

<ul class="kwicks" > 
     <li id="kwick1"></li> 
     <li id="kwick2"></li> 
     <li id="kwick3"></li> 
     <li id="kwick4"></li> 
</ul>

O estilo voce faz como preferir respeitando as config abaixo:

.kwicks li{ 
     float: left; 
     width: 125px; 
     height: 100px; 
     margin-right: 5px; 
}

e por fim so ativar o plugin na classe ‘Kwicks’ colocada na tag ‘ul’:

$().ready(function() {
    $(’.kwicks’).kwicks({
        max : 205,
        spacing : 5
    });
});

Para funcionar perfeitamente, claro, deve importar o js do jQuery e outro do Kwicks:

Kwicks uncompressed
Kwicks packed

Espero que gostem, bem simples mas com um resultado muito expressivo, como diz o próprio slogan do jQuery: "escreva menos e faça mais".  Cya.

Link: Kwicks for jQuery

Eu adoro icones, e isso vem de muito tempo já, brinquei muito com Microangelo, um programa muito louco pra criar pixel icons. Hoje muito mais bonitos e cheio de efeitos, os icones estão na web como forma de criar uma identidade para o site e o fazem de forma muito bela.

Sou usuário do site IconBuffet, onde com uma moeda interna, que recebe mensalmente, você consegue comprar icones entre os usuários, uma proposta bem legal mas que muitas vezes demora. E como web é tempo, e cliente quer prazo, devemos ter uma reserva sempre bem feita de projetos, exemplos, vetores, animações, galerias, icones e tudo que possamos utilizar em nossos projetos, mesmo que não sejam usados da forma como guardamos esses podem nos inspirar para novos vôos.

Por essas andanças de blog em blog encontrei uma lista muuuuuito completa mesmo com icones para download, com qualdiade muito boa e de um bom gosto fantástico. Segue abaixo algun samples e link do posto original.

Free Web Application Icon Set

Function Icon Set

Link: Developer Icon Sets Collection

Uma galeria feita em Flash muito ‘r0x’, em formato de slide voce pode adicionar suas fotos e permitir que os usuarios possam navegar entre ela de forma manual ou atraves de um play no slideshow. O melhor de tudo: Free license. Link do site abaixo…

Link: Flash AutoViewer Photo Gallery

Quem trabalha com web hoje em dia, com Coding principalmente, encontra em diversos sites fontes muito interessantes de jQuery. Esse danado, que amo (lol), não serve somente para dar uma vida, animadinha, no site, ele vai muito além.

Com jQuery você pode validar forms em realTime usando efeitos de fade ou slide nas suas mensagens, pode fazer seus campos de texto ou tags como H1 serem editáveis com projetos em Ajax e muito mais, fora as animações é claro.

No site “Web Dev Lounge” encontrei um tuto muito legal para iniciantes nessa biblioteca de JavaScript, fácil dimais de utilizar e muito bom para expandir. Link abaixo.

Link: jQuery for Dummies on Web Dev Lounge

Quem não tem problemas e mais problemas ao desevolver um projeto web para o IE 6? Qualquer um já passou por isso e é um sufoco, assumo. Uma versao simples de um PNG fix para o Internet Explorer 6 é o “Unit PNG Fix”, somente dois 2kb de javascript e bem eficiente. Suporta autosize nas imagens, diferente de outras versoes de fix para esse problema. Abaixo link do site e download.

Link: Unit PNG Fix Site