Frederico R Martins Blog

Opa pessoal!

Estou aqui compartilhando com vocês mais um dos meus exercícios do curso de Design de Interfaces da Arteccom.

O tema dessa Vez era fazer um blog administrativo para um shopping.

Espero que gostem e comentem. Em breve vou atualizar com aos comentários do professor.

Modulo 2 - Moda Shopping

Modulo 2 - Moda Shopping

Fala Pessoal,

Como prometido eu vou postar aqui como ficou o redesenho do site da academia do exercício do Design de Interfaces da Arteccom. Ficou bem legal, completamente diferente do primeiro layout. Ouvi as criticas do professor e resolvi rever alguns conceitos do site e gostei bastante do resultado final, exceto pelo menu que eu poderia e devo trabalhar mais… mas eu atualizo mais para frente.

Site Saude Academia Redesenho

Site Saude Academia Redesenho

Avaliação:

Muito bom Frederico!

Só o menu principal que ficou perdido na parte superior. O ideal seria integrá-lo à interface, talvez logo abaixo do logotipo. Uma cor azul também o destacaria mais. Lembre-se de distribuir os itens do menu de maneira uniforme para não criar espaços vazios na tarja, combinado!?

Meus parabéns e até o próximo projeto!

Bookmark and Share

Concurso Peixe grande 2009

Concurso Peixe grande 2009

É com muito orgulho que venho informar a todos que estou participando do concurso Peixe Grande 2009 com um dos meus sites! E como sempre conto com a colaboração dos meus leitores para que votem!

O site que está participando é o da Conect Serviços em Informática e o link para votar no Peixe Grande está na página ou vocês podem votar também através do site do concurso ou CLICANDO AQUI.

Conto com o voto de vocês!

Valeu!

Bookmark and Share

Opa pessoal!

Estou passando por aqui para postar o resultado e a avaliação do meu primeiro exercício do curso da Arteccom o Design de interfaces.

Bom a proposta era fazer um site institucional para uma empresa imaginaria. A empresa era uma academia que se chamava Espaço Saúde.

Havia 3 possibilidades de logotipo… olhei todas e finalmente escolhi a que eu iria usar como base para fazer a minha Home Page.

Bom um pequeno briefing sobre o que o dono da academia queria era que ele queria fidelizar uma clientela que ainda não fazia parte da academia, que era a terceira idade. Ele tem uma excelente estrutura para atender esse público, mas não conseguia.

A academia passa por reformas e com isso queria no embalo mudar um pouco o espírito da academia.

Com isso em mente eu fiz o meu primeiro layout. Segue abaixo a imagem.

Academia Espaço Saúde - Web Principal

Academia Espaço Saúde - Web Principal

Academia Espaço Saúde - Web Atividades

Academia Espaço Saúde - Web Atividades

Segue abaixo a Avaliação do Professor do curso:

CONCEITO
O vídeo que você simulou com um box cinza seria muito importante para o cliente analisar se a ideia estaria sendo passada corretamente. Até pelo objetivo da academia de atendimento à terceira idade. Poderia até ser sido simulado por uma foto ou montagem. Fez muita falta.

HIERARQUIA
– Boa a localização dos parceiros, no rodapé. Assim eles são mostrados, mas não como um conteúdo tão relevante assim.
– A foto dos steps eletrônicos é interessante, só faltou gente aí. É claro que esse é um exercício do curso, mas para o cliente, isso faria uma grande diferença. Faltou também a chamada para essa “aula”.

DIAGRAMAÇÃO
– O logotipo em ambas as páginas está “espremido” dando uma sensação de aperto. Reestude os espaçamentos ao redor.
– Alinhe as 9 miniaturas de imagens com a área do Twitter.

IDENTIDADE VISUAL
– Reestude a cor de fundo, pois o verde está destoando da identidade visual. Explore mais as cores do logotipo que você escolheu. Lembre-se que existem outras tonalidades do azul, por exemplo, que pode ser aplicada ao fundo.

USABILIDADE
– Não há necessidade de redundância do menu na base do site pois não é uma tela extensa.
– Não é necessário sublinhar os links do menu. Talvez um outro tratamento aí… uma tarja azul ou laranja em toda a extensão, diminuindo o tamanho do logo, poderia funcionar melhor. Faltou um link sobre os Planos da academia.

REDES SOCIAIS
– Bacana o destaque que você deu para o Twitter. Para ele ser ainda mais atraente para o público, as mensagens poderiam ser algo do tipo: Confira as fotos do aulão com prof. Carlinhos http://www.migre.me/123, Participe da maratona Família no próximo domingo no Aterro. Assim, essas mensagens já trariam exemplos de conteúdo do twitter, atraindo os usuários interessados.
– Logo abaixo das mensagens do twitter poderia ter uma chamada para o usuário seguir a academia e ficar por dentro das novidades.
– Melhore a legibilidade dos ícones do rodapé, pois lembre-se do público-alvo da academia, ou junte tudo nessa área “Redes Sociais”

Em breve vou postar como ficou o Redesenho após as críticas e conselhos da avaliação do professor. Estou só esperando ele me dar um feedback sobre a mesma.

Valeu!

Bookmark and Share

Fala Pessoal,

Venho aqui para dizer que estou buscando me aprimorar cada vez mais nas minhas tecnicas e dizer que estou no curso de design de interfaces da Arteccom.

O curso tem tudo para ser um sucesso que nem foi o web para designers. A única coisa que você precisa é se dedicar nos foruns e tirar o máximo de proveito da colaboração e dos professores.

Boa noite meus leitores!

Retorno a escrever aqui no meu Blog depois de um bom tempo de ausência. Peço desculpas, mas é que os dias de trabalhos andam muito corridos e tem sobrado pouco tempo para eu me dedicar ao blog.

Mas calma que não irei abandona-los. Vou procurar manter uma atualização semanal aqui, trazendo sempre algo bem legal para vocês.

Hoje vou falar de algo simples que faziamos no php comum que era exibir vários resultados seguidos. Algo parecido com o que o Repeater faz, mas vou mostrar algo mais simples e mais editável com HTML + CSS + XML.

Esse exemplo pode ser usado com Mysql ou qualquer banco de dados, o que quero mostrar para vocês é a lógica do negócio.

Bom o exemplo que vou mostrar é bem parecido com um Post meu já publicado aqui o XML + Delphi for php + Smarty Template.

Seguinte, vamos começar:

1 – Criamos um novo projeto:

Criando Nova Aplicação no D4PHP

Criando Novo Projeto no D4PHP

2 –  Criamos o nosso XML o twit.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<tws>

 <tw>
 <foto>taz.bmp</foto>
 <recado>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum dolor ornare felis consequat nec dictum magna laoreet.</recado>
 </tw>

</tws>

3 – Declaramos a Variável que irá virar a Array()


public  $twitters_xml = null;

4 – Criamos as nossas functions para ler o xml

function ler_xml()
 {
   //Lê a variavel $twitters_xml criada no topo.
   global $twitters_xml;

   //Lê o arquivo xml
   $xml = simplexml_load_file("twit.xml");

   //Para cada tw dentro do arquivo xml tratamos como $tw
   foreach($xml->tw  as $tw)
   {
    //Adicionamos uma linha na nossa array.
    $twitters_xml[] = "
<div class='line'>
    <img src='" . utf8_decode($tw->foto) . "' width='70' height='70' alt='foto'/>

" . utf8_decode($tw->recado) . "</div>
";
    }
 }

5 – Criamos a associação na criação do template indo em Inspetor de Propriedades > Eventos > On Template (dê dois cliques), dentro da function digite:

 global $twitters_xml;

 //Executa a function
 $this->ler_xml();

 //Faz a associação com a variável do html
 $template = $params['template'];
 $template->_smarty->assign("listagem", $twitters_xml);

6 – O grande truque no Html…

Enfim o grande truque no Smarty que é as seguintes linhas que fazem o loop com o php para que possamos mostrar a array.

{%section name=twit loop=$listagem%}
{%$listagem[twit]%}
{%/section%}

Com ela criamos uma seção com um determinado nome e sua variável de loop. Note que essa variável é a responsável pela integração com a nossa function.

Logo após mostramos os resultados e fechamos a seção novamente.

Segue abaixo o cógio html por completo:

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Smarty com array</title>
<style type="text/css">
<!--
.line {
 width: 400px;
 margin-top: 10px;
 background-color: #333333;
 height: 80px;
}
.line img {
 height: 70px;
 width: 70px;
 border: 1px solid #FFFFFF;
 margin: 5px;
 float: left;
}
.line p {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.75em;
 line-height: 19px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 padding-top: 2px;
 color: #FFFFFF;
}
h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 2em;
 color: #990000;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 0px;
 line-height: 19px;
}
-->
</style>
{%$HeaderCode%}
</head>

<body>
{%$StartForm%}
<h1>Twitter Like</h1>
{%section name=twit loop=$listagem%}
 {%$listagem[twit]%}
{%/section%}

{%$EndForm%}
</body>
</html>

6 – Não esqueça de linkar o Html no Inspetor de Objetos!! E colocar a Engine como Smarty Template!

Bom, é isso pessoal espero que tenham gostado de mais um tutorial de Delphi for php.

Ah achou que acabou? Dessa vez eu disponibilizei o download do exemplo feito aqui nesse Post. Qualque dúvida é só deixar o seu comentário!

Download do exemplo clique aqui.

Valeu Folks!

Bookmark and Share

Boa noite pessoal!

Bom estou aqui para fazer um rápido tutorial para explicar o funcionamento do Ajax no Delphi for php.

Para começarmos, abra um novo projeto.

Feito isso no seu FORM, esteja certo de que no Object Inspector o USEAJAX esteja setado para TRUE!

Caso contrário o ajax não irá funcionar!

Levando isso tudo em consideração:

>Adicione no seu Form um Button e um Label.

>Agora dê um duplo clique no button e coloque o seguinte código


//Muda o Caption do botão

$this->Button1->Caption = "Click Ajax " . date("d-m-Y g:i:s a");

//Muda o caption da label

$this->Label1->Caption = "Hello from Ajax!! " . date("d-m-Y g:i:s a");

//Muda a cor da label para um cor random.

$this->Label1->Color = "#" . dechex(rand(0, 0xFFFFFF));

Agora vamos colocar a rotina para fazer a execução em Ajax.

Para fazer isso vá no button e no Object Inspector, vá na aba Javascript e dê um duplo clique em OnClick e adicione o seguinte código.

//Chama o ajaxcall para fazer a requisição. Veja que ele chama a propriedade anterior que nós definimos.
echo $this->Button1->ajaxCall(“Button1Click”);
?>
//Return false para prevenir que o form seja enviado.
return(false);

Bookmark and Share

Arquivos

Twitando

Meus últimos bookmarks

RSS IDG Now!

  • Ocorreu um erro. É provável que o feed esteja indisponível. Tente mais tarde.