Chackan's Weblog

Agosto 13, 2009

Desafio de Projeto Integrado

Arquivado em: Geral — Sérgio Santana @ 2:21 pm
Tags:

Neste semestre (4º período de Sistemas de Informação), estou cursando a disciplina Projeto Integrado, que tem como objetivo consolidar os conhecimentos adquiridos nos semestres anteriores, onde, a partir de um problema a ser resolvido, nos (meu grupo) teremos que apresentar e documentar a solução.
Tem que ser integrado pelo menos uma tecnologia com a linguagem C.
Escolhemos o tema Biometria. A biometria é o estudo estatístico das características físicas ou comportamentais dos seres vivos, que é muito usada na identificação criminal, controle de acesso, etc. Existem vários tipos de biometria. Escolhemos a impressão digital, por ser um método mais rápido, fiabilidade alta e baixo custo.
O grande desafio é: capturar a digital do usuário utilizando a linguagem Java, passa essa informação para a linguagem C (provavelmente uma dll) que terá as regras de negócio, salvando em um banco de dados MySql.
Este projeto será muito interessante, porque nenhum integrante do grupo programa em Java.
Temos dois meses e meio para concluí-lo!
Nesse período, irei postar os nosso avanços. Qualquer ajuda será bem vinda!

Até mais.

Fevereiro 9, 2009

Desabilitando o layout para uso de Ajax

Arquivado em: PHP, Zend Framework — Sérgio Santana @ 12:55 pm
Tags: , ,

Exemplo de controller, quando for chamar um ajax manualmente (sem o uso do dojo por exemplo).

no controller, desabilite o layout:

public function __construct($request, $response){
	parent::__construct($request, $response);
	$mvc	= Zend_Layout::getMvcInstance()->disableLayout();
}

quando for chamar o método declarar o header e setar o render para não renderizar:

header("Content-Type: text/html; charset=ISO-8859-1");
$this->_helper->viewRenderer->setNoRender(true);

Abril 8, 2008

Como criar seu próprio Framework PHP

Arquivado em: PHP — Sérgio Santana @ 1:58 pm

Frameworks são criados com o intuito de acelerar o desenvolvimento de softwares, evitando que se perca tempo na hora da codificação.

Antes de iniciarmos o nosso framework, vamos pensar como vai ser a estrutura de diretórios e como vão ser feitas as requisições.

framework
| application
| | controllers
| | models
| | views
| public
| | .htaccess
| | index.php
| .htaccess

Nesse modelo de diretório, seguindo o padrão de arquitetura MVC (Modelos, Visões e Controladores), nos temos uma página index.php dentro da pasta public, que vai ser nossa pasta de acesso pública, todas as outras pastas serão de acesso restrito, então todas as requisições vão ser feitas por essa index.

Para que isso aconteça, criamos os arquivos .htaccess com os seguintes códigos:

.htaccess da pasta do framework


RewriteEngine on
RewriteRule    ^$ public/    [L]
RewriteRule    (.*) public/$1 [L]

Nesse .htaccess agente redireciona qualquer acesso a pasta framework, para a pasta public.

Agora o .htaccess da pasta public


RewriteEngine on
RewriteRule !\.(js|ico|txt|gif|jpg|png|css|doc|log|pdf|rtf|odt|xls)$ index.php

Nesse outro .htaccess agente fala que só os arquivos de imagens, css, javascript e a página index.php podem ser acessados.

Bem, agora já temos a metade do nosso framework feito. Precisamos configurar a nossa página index.php da pasta public para receber as requisições e chamar o controlador correspondente.

Os controladores e seus métodos vão ser chamados via parâmetro na URL.

index.php


$url = $_SERVER["REQUEST_URI"];

$url = str_replace("/sergio/exemplos/mvc/", "", $url);

$op = explode("/", $url);

if ( $op[0] )
{
    include ("../application/controllers/" . $op[0] . ".php");
    $obj = new $op[0] ();
}
else
{
    include ("../application/controllers/hello.php");
    $obj = new Hello();
}

if ( $op[1] == "" )
{
    $obj->index();
}
else
{
    $obj-> $op[1] ( $op[2] );
}

Passo a passo:

Na linha 1 eu pego todo o caminho da nossa aplicação apartir do servidor. Exemplo: se eu tenho um endereço http://localhost/aqui/eonosso/caminho , com o REQUEST_URI eu vou pegar /aqui/eonosso/caminho.

Na linha 3 eu retiro a parte que não é interessante pra mim, no caso aqui/eonosso/caminho, que eu tenho que acessar antes, até chegar na minha aplicação.

Na linha 5 eu tiro todas as / (barras) encontradas no endereço e monto um array a partir de cada barra tirada, e armazeno na variável $op.

Nas outras linhas eu monto uma estrutura de condição para verificar se foi passado algum nome de controle por parâmetro, se não for passado eu chamo o controle hello, que no nosso caso vai ser o nosso controle padrão. Também verifico se foi passado algum método por parâmetro, se não foi passado chamo o index.

Agora precisamos criar o controlador hello e o método index para que possamos ver o nosso framework funcionando.

hello.php


class Hello
{
    public function index ()
    {
        echo "alooooooooo class hello metodo index!";
    }

}

Lembrando que esse arquivo hello.php é a nossa classe controladora hello e tem que ser salva no diretório de controllers.

Agora se tentamos acessar, http://localhost/aqui/eonosso/caminho ele vai chamar o controlador padrão, no nosso caso o hello, e o método index. Se tentarmos acessar http://localhost/aqui/eonosso/caminho/hello ele também vai acessar e se tentamos http://localhost/aqui/eonosso/caminho/hello/index também irá funcionar.

Bem, com essas explicações já temos o nosso framework php rodando! Agora é só codificar suas classes e métodos e construir o seu framework.

No próximo post eu vou trazer um exemplo de uso desse nosso framework utilizando as 3 camadas aqui criadas, a camada controladora, a camada de modelos e a camada de visões.

Até a próxima…

Março 28, 2008

“TV” de notícias

Arquivado em: Js — Sérgio Santana @ 8:25 pm

Estou postando um exemplo de tv de notícias feito com javascript.

O que esse script faz?

Ele carrega um array com as noticias que eu quero exibir;

Cria os links de avançar e voltar.

vamos aos códigos:

tv.html

<html>
<head>
<title>exemplo de tv de noticias</title>
<script src="js/yahoo-dom-event.js"></script>
<script src="js/tv.js"></script>
<script>
var showText = function()
{
this.text = new Array( "text1" , "text2" , "text3" );
var content = new Tv( "viewText" , this.text );
}
window.onload = showText;
</script>
</head>

<body>

<div id="viewText"></div>

</body>
</html>

explicando: no head, eu crio o array com as noticias que eu quero exibir na tvzinha, crio o objeto Tv, passo a id da tag que eu quero exibir a tv e carrego esse array.na body eu tenho uma div com id viewText que é aonde eu vou exibir minha tv.tv.js

</pre>
var Tv = function( element , data , options )

{

if( !element )

alert( "HTMLElement or HTMLElement.id is required" );
this.element = YAHOO.util.Dom.get( element );

this.data    = data || [];

this.options = options || {};
this.init();

}
Tv.prototype = {
current: 0,

width: "300px",

height: "200px",

nextValue: "Avançar",

previousValue: "Voltar",
init: function()

{

this.current = this.options.start || this.current;

this.render();

},
render: function()

{

var height            =  this.options.height || this.height;

var width             =  this.options.width || this.width;

var previousValue     =  this.options.previousValue || this.previousValue;

var nextValue         =  this.options.nextValue || this.nextValue;
var slide = document.createElement( "DIV" );

slide.style.height = height;

slide.style.width = width;

slide.innerHTML = this.data[this.current];

slide.id = "slide_" + this.element.id;

slide.style.backgroundColor = "#eee";
var grid = document.createElement( "DIV" );

var clear = document.createElement( "DIV" );

clear.style.clear = "both";
var nextButton     = this.createButton( nextValue , "click" , this.next , "next" );

var previosButton  = this.createButton( previousValue , "click" , this.previous , "previous" );
grid.appendChild( nextButton );

grid.appendChild( previosButton );
this.element.appendChild( slide );

this.element.appendChild( grid );

this.element.appendChild( clear );

},
createButton: function( label , action , func , labelClass )

{

var button = document.createElement( "DIV" );

button.className = labelClass;

var link = document.createElement( "A" );

link.href="#this";

link.innerHTML = label;
YAHOO.util.Event.on( link , action , func , this , true );
button.appendChild( link );
return button;

},
next: function()

{

this.current++;
if( this.current == this.data.length )

this.current = 0;
YAHOO.util.Dom.get( "slide_" + this.element.id ).innerHTML = this.data[this.current];

},
previous: function()

{

this.current--;
if( this.current < 0 )

this.current = ( this.data.length - 1 );
YAHOO.util.Dom.get( "slide_" + this.element.id ).innerHTML = this.data[this.current];

}

}
<pre>

explicando o código, começo criando meu objeto que vai receber 3 parâmetros, o primeiro element recebe o id da tag da onde agente quer exibir a tv, o segundo data é o array com as noticias e o terceiro é um opcional que eu posso estar alterando o tamanho da tv, altura etc.

depois eu crio o constructor da tv, passando os valores padroes e criando a tv propriamente dita, crio o botao, que vai ser meu link de avancar e voltar.

obs: baixar o yahoo-dom-event.js do site do YAHOO! http://developer.yahoo.com/yui/

é isso pessoal!

Março 20, 2008

3 simples exemplos de JavaScript manipulando elementos do HTML

Arquivado em: Js — Sérgio Santana @ 1:28 pm

3 exemplos de manipulação de TAGs ou seus IDs do HTML usando JS. Nos exemplos irei trocar as cores dos elementos.

no primeiro exemplo, utilizei o evento onClick (que vai fazer alguma coisa quando for clicado) para trocar a cor de fundo de um elemento do html que eu chamei pelo seu id. Vamos ao código:

<div id="doc" class="yui-t2">

<div<b> id="hd"</b>>

<p>Header</p>

</div>

<div id="bd">

<div id="yui-main">

<div class="yui-b">

<p>Main - exemplo de javascript pegando um elemento do documento e trocando a propriedade</p>

</div>

</div>

<div class="yui-b">

<ul>

<li><a href="#this" <b>onClick="document.getElementById('hd').style.background='blue';"</b>>trocar cor do head - cor azul</a></li>

<li><a href="#this" onClick="document.getElementById('hd').style.background='yellow';">trocar cor do head - cor amarelo</a></li>

<li><a href="#this" onClick="document.getElementById('hd').style.background='red';">trocar cor do head - cor vermelho</a></li>

</ul>

</div>

</div>

<div id="ft">

<p>Footer</p>

</div>

</div>

no onClick, quando eu clicar ele vai no documento (objeto), pegar o elemento pela sua ID (no caso o hd) e colocar uma cor de fundo azul.

no segundo exemplo, vou seguir a mesma linha de racioncínio, vou usar o onClick pra fazer alguma coisa quando eu clicar, só que agora eu vou passar alguns parâmetros que eu quero que ele altere. Vamos ao código:

entre a tag <head> eu crio uma função:


<script type="text/javascript">

var setColorTag = function( tag , color )

{

var getTags = document.getElementsByTagName( tag );

var setColor = color;

for ( i = 0; i < getTags.length; i++ )

{

getTags[i].style.backgroundColor = setColor;

}

}

</script>

nessa funcao setColorTags eu estou passando dois parâmetros que ela vai receber pra poder fazer algo, nesse exemplo ele vai pegar uma tag e vai trocar a cor de fundo dela.

agora entre a tag <body> eu tenho o seguinte codigo:


<<b>div</b> id="doc" class="yui-t2">

<<b>div</b> id="hd">

<p>Header</p>

<ul>

<li><a href="#this" <b>onClick="setColorTag('div','blue');"</b>>trocar cor das divs - cor azul</a></li>

<li><a href="#this" onClick="setColorTag('div','yellow')">trocar cor das divs - cor amarelo</a></li>

<li><a href="#this" onClick="setColorTag('div','red')">trocar cor das divs - cor vermelho</a></li>

</ul>

</div>

<<b>div</b> id="bd">

<<b>div</b> id="yui-main">

<<b>div</b> class="yui-b">

<p>Main - exemplo de javascript pegando qualquer elemento do documento pela sua tag e trocando a propriedade</p>

</div>

</div>

<<b>div</b> class="yui-b">

<p>other block</p>

</div>

</div>

<<b>div</b> id="ft">

<p>Footer</p>

</div>

</div>

explicando… no onClick eu vou chamar a função que eu criei pra setar uma cor pra alguma tag, e passo como parâmetro a tag DIV e uma cor. Lá na função tem um for, que vai procurar todos os divs e colocar uma cor de fundo neles.

e pra finalizar, no exemplo 3 eu quero que fique trocando de cor sozinho, em um intervalo de tempo, um elemento que eu vou determinar pela sua ID. Vamos ao código:


<script type="text/javascript">

<b> window.onload = randomColorTagId;</b>

function randomColorTagId()

{

var cor = new Array();

cor[0] = 'blue';

cor[1] = 'yellow';

cor[2] = 'red';

var i = Math.random()*(cor.length-1);

i = Math.round(i);

document.getElementById( 'doc' ).style.backgroundColor = cor[i];

<b>setTimeout( "randomColorTagId()" , 1000 );</b>

}

</script>

na primeira linha eu falo pro objeto windows: janela você vai carregar a funcao randomColorTagId. Meu evento agora é onload. Então, quando for carregado a pagina ele vai executar a função, que cria um array com as cores que eu quero que ele fique alternando e determino um intervalo de tempo pra ele trocar, usando o setTimeout.

Espero ter ajudado…

Março 18, 2008

Utilizando a biblioteca de CSS do Yahoo!

Arquivado em: Css — Sérgio Santana @ 9:03 pm

Ontem (17/03/2008), aprendi a utilizar a biblioteca css grid de desenvolvimento do Yahoo!, a famosa UI Library: Grids CSS.

Vou mostrar alguns exemplos de layout utilizando esse css.

ps: o css pode ser baixado diretamente nesse link aqui.

exemplo1:

exemplo1


<div id="yui-main">

<div class="yui-g">

<div class="yui-u first">

<p>A - exemplo de uma unidade com 50% de espaço</p>

</div>

<div class="yui-u">

<p>B - outra unidade com 50% de espaço</p>

</div>

</div>

</div>

onde a class yui-g vai dividir 2 unidades em 50%. A class yui-u é a propria unidade, todas alinhadas a direita, e quando eu declaro first, eu estou determinando que ela vai flutuar a esquerda, ficando alinhada como a primeira coluna.

exemplo2:

exemplo2


<div id="yui-main">

<div class="yui-g">

<div class="yui-g first">

<div class="yui-u first">

<p>A - unidade usando class first</p>

</div>

<div class="yui-u">

<p>B - unidade padrao</p>

</div>

</div>

<div class="yui-g">

<div class="yui-u first">

<p>C - unidade usando class first</p>

</div>

<div class="yui-u">

<p>D - unidade padrao</p>

</div>

</div>

</div>

</div>

mesma linha de raciocínio do exemplo1. Como eu quero criar quatro colunar, então eu crio uma div com class yui-g e dentro dessa div, mais duas divs de mesma class yui-g.

exemplo3:

exemplo3


<div id="yui-main">

<div class="yui-b">

<div class="yui-gc">

<div class="yui-u first">B - unidade utilizando a class first pra alinhamento a esquerda</div>

<div class="yui-u">C - unidade padrao</div>

</div>

</div>

</div>

<div class="yui-b">A - bloco padrao com alinhamento a esquerda. documento utilizando template 2</div>

neste exemplo, utilizo o template 2, que cria uma coluna restrita a esquerda de tamanho 180px. Dentro dela crio uma div de class yui-gc que dividi a grid em 2/3 e 1/3.

maiores informações: YUI Grids CSS

Hello world!

Arquivado em: Geral — Sérgio Santana @ 4:58 pm

Olá galera, sejam bem vindos ao meu WordPress!

A intenção desse blog é arquivar meus trabalhos, códigos e desafios que venho enfrentando aqui na Preceptor, onde comecei a estagiar esta semana.

Então, vou estar disponibilizando o que venho fazendo e aprendendo por aqui.

Falou!

Blog no WordPress.com.