sexta-feira, 28 de agosto de 2009

Criando um Port Scanner em Delphi


Um port scanner é um programa que serve para procurar por portas TCP/IP abertas em um ou mais computadores da rede.
É possível criar um port scanner em delphi facilmente com poucas linhas de código.
Criei um port scanner multithread apenas para demonstrar como threads podem ser usadas no dia a dia.
Vale a pena conferir, no meu space da dev media.
http://www.devmedia.com.br/articles/viewcomp.asp?comp=14097



você pode fazer o download direto dele aqui no meu drop box

Esta é apenas a primeira versão. Faremos sucessivas melhorias até ele se tornar uma ferramenta que possa ser usada por algum administrador de redes.

sexta-feira, 21 de agosto de 2009

Transformando imagem em HTML

Recentemente minha esposa perguntou como transformar imagens em html, para postar imagens em blogs e talz.

Uma rápida pesquisa no google levou a conclusão de que a maioria deles não faz muito bem o que se presta a fazer. Talvez uma busca mais aprofundada me levasse a um belo programinha open-source, mas eu desisti de procurar.

A principio eu disse simplesmente que não dá, tem que colocar a imagem em algum lugar na web, um fotolog, drop box ou coisa parecida, e depois adicionar uma tag img que faça referência a ela.

Mas como todo programador adora desafios, ta aí, resultado de 5 min de código e do nosso .net framework.

Em breve eu posto o código fonte :) mas só se comentarem!

A imagem: Infelizmente não poderá ser postada aqui no blogspot porque todos os pixeis ficam em cima de um só. Parece que aqui não funciona direito o "position".

quinta-feira, 6 de agosto de 2009

Criando uma galeria de imagens em javascript




Isso é tanto um tutorial como uma bibliotequinha de galeria open source. Acho que todos já precisaram fazer uma galeria de imagens para um site, fosse apenas institucional, fosse e-commerce.

Existem 1001 maneiras de se fazer uma galeria dessas. Eu criei uma simples, sem usar muitos recursos do DOM. Criei onze exemplos, de "A" a "K" que mostram como fazer uma galeria de imagens. O primeiro exemplo mostra como fazer da maneira mais simples possível, e a complexidade vai aumentando conforme você vai chegando no exemplo K.

Todos os exemplos estão comentados detalhadamente. É bom abrir os exemplos apenas de dois em dois para comparar as diferenças entre eles. Você pode usar o winmerge :)

É importante ressaltar que para alguns esses exemplos podem parecer fracos, mas eles foram desenvolvidos visando quem é totalmente leigo em javascript.

Primeiro de tudo você precisa ter uma área com as imagens pequenas, que ao serem clicadas aparecerão em uma imagem maior. Na verdade todas as nossas imagens serão grandes, mas serão achatadas nas img pequenas. Para a criação de Thumbnails reais, deve-se usar script server-side como PHP ou asp.net.

Você pode baixar todos os exemplos no meu Sky Drive, ou no meu Drop Box.

Exemplo A:







<html>

 <head>

    <script>


     //funciona em todos os browsers

     //o que esta função faz: ela espera que você passe um numero inteiro positivo no lugar de xxx (seu unico argumento ou parametro)

     //usando document.getElementById('imagemzona') ele obtem o objeto da imagem maior e altera o seu src concatenando 3 partes:

     // 1) o caminho e primeira parte do nome

     // 2) a parte variavel (no caso o xxx)

     // 3) a extensao, que no caso é gif.

  

    

            function CarregaImagenzao(xxx)

            {

                document.getElementById('imagemzona').src = 'img/ronaldoimge'+xxx+'.gif';

            }

        

   </script>

  </head>

   <!-- é necessario, alem de dar um id para as imagens, definir seu evento onclick, chamando CarregaImagenzao(<passando aqui o umero da imagem>) -->

     <img src='img/001.gif' id='imge1' width=50 height=50 onclick='CarregaImagenzao(1);'/>

     <img src='img/002.gif' id='imge2' width=50 height=50 onclick='CarregaImagenzao(2);'/>

     <img src='img/003.gif' id='imge3' width=50 height=50 onclick='CarregaImagenzao(3);'/>
     <img  src='img/001.gif' id='imagemzona' width=300 height=300/>
     <br>
     <br>
     <pre>
            é necessario, alem de dar um id para as imagens, definir seu evento onclick, chamando CarregaImagenzao(&lt;&lt;passando aqui o umero da imagem&gt;&gt;) 
            //funciona em todos os browsers

            //o que esta função faz: ela espera que você passe um numero inteiro positivo no lugar de xxx (seu unico argumento ou parametro)

            //usando document.getElementById('imagemzona') ele obtem o objeto da imagem maior e altera o seu src concatenando 3 partes:

            // 1) o caminho e primeira parte do nome

            // 2) a parte variavel (no caso o xxx)

            // 3) a extensao, que no caso é gif.

    </pre>
 </body>
</html>
      






Os proprios arquivos HTML contém um tutorialzinho, como este:

é necessario, alem de dar um id para as imagens, definir seu evento onclick, chamando CarregaImagenzao(<<passando aqui o umero da imagem>>)

//funciona em todos os browsers

//o que esta função faz: ela espera que você passe um numero inteiro positivo no lugar de xxx (seu unico argumento ou parametro)

//usando document.getElementById('imagemzona') ele obtem o objeto da imagem maior e altera o seu src Concatenando 3 partes:

// 1) o caminho e primeira parte do nome

// 2) a parte variavel (no caso o xxx)

// 3) a extensao, que no caso é gif.

Por isso não irei detalhar cada um dos arquivos, apenas o último, porque é uma biblioteca de geração de galeria completa.

A última galeria é um arquivo .js. Para usá-la é simples, basta entender como funciona a estrutura da página de galeria:

Eu tenho duas pastas de imagens, a pasta "IMG" e a pasta "Outras". Na pasta img ficarão as imagens da galeria, e na outras ficarão as outras imagens do site que não terão evento, nem ampliação nem nada. Na página html há um img com o id='imagemzona' e a classe = 'imggrande', uma div com o id='divgaleria' que será o lugar onde ficarão os thumbnais.

Tem também um arquivo css simples com as classes 'imgpequena' e 'imggrande', e o arquivo .js referido que faz a coisa toda acontecer. Na minha página html eu referencio/importo/chamo esses 2 arquivos.

Para funcionar você tem que basicamente colocar as imagens na pasta img e o "Inicializa();" ou o "InicializaTempo();"no evento onload.

Ainda não está 100%, faltam umas coisas, como por exemplo identificar o browser do cara, se é IE ou FF e qual a versão, mas já serve. Abra os exemplos desde o A até o K e veja os comentários das funções e as páginas HTML de teste.

Nas três ultimas versões existem alguns parâmetros/variáveis para setar no javascript, e a ultima de todas, a versão "K" é a mais completa de todas. A Versão "K" reune as fuincionalidades de carga automática de imagens da versão H com a carga "manual" através de tags html das versões anteriores. Abaixo você confere a lista de parâmetros da versão K:

var CARREGA_IMG_AUTOMATICA = true; //sete este parâmetro, que ativa temporizador para true para, alem das imagens estáticas ele carregar as dinâmicas.

var QTDE_MAXIMA_IMAGENS = 20; //quantidade maxima de imagens da galeria

var Extencoes = new Array(".gif",".jpg",".png", ".bmp"); //extensões ou sufixos validos

var IMAGENS = "img/"; //diretorio de imagens

var ID_GALERIA = "divgaleria"; //id da div que vai conter os thumbnais da galeria

var ID_IMAGEMGRANDE = "imagemzona"; //id da imagem grande a ser demonstrada

var CLASSE_IMAGEMPEQUENA = "imgPequena"; //classe da imagem pequena

var CARACTER_ESQUERDA = "0"; //caracter a ser preenchido a esquerda no nome das imagens usando padleft

var TAMANHO_NOME = 3; //tamanho do nome da imagem sem caminho e sem extencao: exemplo 005.jpg o tamanho é 3

var DEBUG_MODE = false; //setar para true quando quiser visualizar as mensagens de erro

Experimente usar essa galeria em conjunto com asp, asp.net, php ou qualquer linguagem dinâmicaserver-side. Assim, até mesmo as imagens estaticas podem ser dinamicas via código html dinamico gerado do lado do servidor. Sendo a variavel QTDE_MAXIMA_IMAGENS menor e a variavel CARREGA_IMG_AUTOMATICA = false o site carrega bem mais rapido pois o loop de imagens a ser carregado é menor, ou no caso de CARREGA_IMG_AUTOMATICA = false ele nem chega a ser repetido indefinidamente pelo temporizador. Você também pode implementar a carga de todas as imagens pequenase grandes em divs invisíveis que vão aparecendo e desaparecendo via javascript, conforme a thumbnail que o usuário clica. Existem milhares de possibilidades/combinações diferentes.



Para um próximo release implementaremos a navegação com as setas do teclado e a identificação do browser do usuário.

É isso aí, espero que seja útil para designers que não tem familiaridade com o javascript.








Console.Writeline(@"Have Fun \(^^)/");

Postagens populares

Marcadores

delphi (60) C# (31) poo (21) Lazarus (19) Site aos Pedaços (15) sql (13) Reflexões (10) .Net (9) Humor (9) javascript (9) ASp.Net (8) api (8) Básico (6) Programação (6) ms sql server (5) Web (4) banco de dados (4) HTML (3) PHP (3) Python (3) design patterns (3) jQuery (3) livros (3) metaprogramação (3) Ajax (2) Debug (2) Dicas Básicas Windows (2) Pascal (2) games (2) linguagem (2) música (2) singleton (2) tecnologia (2) Anime (1) Api do Windows (1) Assembly (1) Eventos (1) Experts (1) GNU (1) Inglês (1) JSON (1) SO (1) datas (1) developers (1) dicas (1) easter egg (1) firebird (1) interfaces (1) introspecção (1) memo (1) oracle (1) reflexão (1)