» Desenvolvimento » Modelando por Diego Franco

Modelando por Diego Franco

Este é o site pessoal do Diego Franco Miguel, Desenvolvedor, Webdesigner (Padrões Web, XHTML, Microformats e tudo que contribui para uma melhor customização e leitura de um site), falo aqui sobre novos comportamentos na internet bem como as evoluções que ela sofre na área de desenvolvimento.



Instalando o Magento automaticamente usando o Xampp como servidor

Por: Diego Franco - [ November 19th, 2009 ]

Esse post é para ser daqueles do tipo rápido e objetivo.

Situação:

  • Quero instalar o Magento em minha máquina local windows;
  • Quero instalar o Magento em minha máquina local windows usando o Xampp como servidor;
  • Quero instalar o Magento em minha máquina local windows automaticamente com ele próprio gerando todas as tabelas usando a funcionalidade de configuração passo a passo;

Alguns problemas que você pode ter:

  • O Magento não roda no endereço padrão do Xampp ou seja: “http://localhost” sendo necessário a criação de um alias para o localhost no arquivo host do windos em : C:\WINDOWS\system32\drivers\etc \hosts (Não vou entrar em detalhes para este caso afinal a idéia do post é que você use a própria configuração padrão do Xampp para o Magento executar sua instalação automaticamente);
  • Você tenta setar a localização, fuso horário e moeda e nada acontece;
  • Você pula para o próximo passo que é as configurações de banco submete a página e nada acontece também;
  • Você talvez consiga instalar mas para na tela de login do administrador e não sai dali.

Vamos lá, aqui está a solução pra você que quer instalar o Magento em uma máquina local windows automaticamente, com ele próprio gerando todas as tabelas usando a funcionalidade de configuração passo a passo e usando o Xampp como servidor(Ao menos pra mim funcionou).

E ainda apenas para efeitos de informação estou usando a versão 2.5 do Xampp e 1.3.2.1 do Magento e o resultado deste post é a compilação de um estudo rápido e algumas bases de conhecimento incluindo o Fórum de discussão do próprio Magento.

Vamos a prática:

1o - Baixe a última versão do Magento no site;

2o - No diretório físico padrão do Xampp no meu caso usei: D:\xampp\htdocs\crieumdiretorioparasualoja;

3o - Descompacte a versão do Magento que você baixou neste diretório, provavelmente a estrutura ficará da seguinte forma:

magento1

4o - Vá até o browser e acesse a URL com o diretório criado, você verá algo da seguinte maneira:

No meu caso criei um diretório chamado “lojamodelo”: (Digite apenas http://localhost/seudiretorio isto já é suficiente)

magento2

5o - Para o próximo passo você precisará estar com acesso a internet, clique no botão “Start the download process”, todos os arquivos necessários restantes serão baixados para o seu diretório, aguarde até que todos os arquivos sejam baixados

magento3

Baixado todos os arquivos siga para o próximo passo clicando no botão “Continue Magento Installation”, deverá exibir a seguinte página:

magento4

6o - Antes de prosseguir, deixe o navegador nesta página e efetue ou certifique-se que os seguintes passos estejam ok:

- Certifique de que o InnoDB no MySQL esteja habilitado, por padrão no Xampp costuma vir desabilitado, para isto faça o seguinte:

Acesse a pasta bin do mysql. No caso do Xampp dentro do próprio diretório do Xampp, no meu caso: D:\xampp\mysql\bin

Acesse o arquivo my.cnf (Ele é parecido com um atalho, abra um Bloco de Notas ou Notepad++ e arraste o arquivo para dentro dele)

magento5

Localize a linha skip-innodb e comente-a adicionando o caractere “#” no ínicio da linha e descomente as demais linhas excetos as linhas que possuirem um espaço entre o # e o inicio do texto.

(Ex: # Uncomment the following if you are using InnoDB tables)

O trecho de código deverá ficar da seguinte forma, não esqueça de salvar o arquivo:


#skip-innodb
# Uncomment the following if you are using InnoDB tables
innodb_data_home_dir = D:/xampp/mysql/data/
innodb_data_file_path = ibdata1:10M:autoextend
innodb_log_group_home_dir = D:/xampp/mysql/data/
innodb_log_arch_dir = D:/xampp/mysql/data/
# You can set .._buffer_pool_size up to 50 - 80 %
# of RAM but beware of setting memory usage too high
set-variable = innodb_buffer_pool_size=16M
set-variable = innodb_additional_mem_pool_size=2M
# Set .._log_file_size to 25 % of buffer pool size
set-variable = innodb_log_file_size=5M
set-variable = innodb_log_buffer_size=8M
innodb_flush_log_at_trx_commit=1
set-variable = innodb_lock_wait_timeout=50

7o - Agora resolveremos o problema do Magento rodar no localhost padrão da máquina.

O problema ocorre pois a instalação é local e o Magento tem algumas rotinas de verificação de host, basta desativar algumas linhas ou alterar o hosts que irá funcionar corretamente, siga os seguintes passos para solucionar o problema.

  • Vá até o diretório onde você instalou o Magento, provavelmente agora estará com vários arquivos e pastas amais haja vista 5o passo ter sido executado;
  • Procure o arquivo Varien.php em: (No meu caso)
    D:\xampp\htdocs\lojamodelo\app\code\core\Mage\Core\Model\Session\Abstract\Varien.php
  • Abra o arquivo e encontre as seguintes linhas:

Próximo a linha 70


// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime(),
$this->getCookie()->getPath()//,
$this->getCookie()->getDomain(),
$this->getCookie()->isSecure(),
$this->getCookie()->getHttponly()
);

Comente os 3 filtros de checkagem para dominio, segurança e http

O trecho de código deverá ficar da seguinte forma:


// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime()//,
$this->getCookie()->getPath()//,
// $this->getCookie()->getDomain(),
// $this->getCookie()->isSecure(),
// $this->getCookie()->getHttponly()
);

Salve o arquivo!

8o - Vamos voltar ao navegador, provavelmente você estará na página com o aceite do contrato e a continuação da instalação passo a passo - Vide 5o passo.

9o - Aceite os termos de uso clicando no Checkbox e avançe para o próximo passo;

10o - Selecione os dados de localização, país, fuso horário e moeda;

magento1

11o - Adicione os dados de banco, como você estará instalando local via Xampp, é bem provável que fique esta página fique da seguinte forma:

Antes de inserir o nome do banco certifique-se de que você tenha criado uma base de dados vazia via phpmyadmin (http://localhost/phpmyadmin/) conforme tela abaixo:

magento1

Caso já tenha criado uma base de dados vazia continue o passo a passo inserindo no campo”"Database Name” o nome do banco que você criou.

magento1

12o - Após submeter esta página, é bem provável que ela demore um bom tempo para responder pois todas as tabelas estarão sendo criadas no banco neste momento, aguarde até que a fase seja concluida não apavore, simplesmente espere;

Após este passo a seguinte tela aparecerá:

magento1

Cadastre os dados conforme solicitado pode deixar o campo “Encryption Key” vazio. Submeta a página, o Magento irá gerar uma chave criptografada, certifique-se de deixar estes dados anotados em algum lugar para você não ter problemas futuros.

A seguinte tela será exibida e o Magento estará rodando perfeitamente local em sua máquina sem necessidade de virtualizar o localhost.

magento1

Nagegue à vontade tanto na Loja quanto na Área administrativa.

Galera caso eu tenha tropeçado em alguma informação ou me equivocado em algum ítem ou ainda você queira agregar em algo por favor compartilhe conosco, comente a sua observação para postarmos um update no post.

Espero ter ajudado.

Procure por: MP3, iPod, celulares, notebooks, câmeras

[...] Continuar lendo...

Desenvolvimento | 5 Comentários » View blog reactions

Tags |

Aproveite! Leia isto também:



Plugin advlink: Ensira atributos rel, hreflang, class, ID, nos links dos seus posts sem precisar ir no código

Por: Diego Franco - [ November 3rd, 2008 ]

Primeiro você deve estar se perguntando: Porque esse cara sumido resurgiu da luz (das trevas é fria) e começou a escrever sem parar? A respota é simples estou de mini-férias(1 semaninha só pra respirar) e estou me disciplando a escrever periodicamente, com o lançamento do novo design do blog, o segundo, que será lançado no dia 13/10/2008.

Mas vamos lá. Antes de iniciar a leitura deste post leia este primeiro http://diegofranco.net/archives/tinymce-o-editor-do-wordpress .

Conforme prometido vou falar sobre o ADVLINK um plugin para o editor tinyMCE usado no popular Wordpress, suas funcionalidades e como instalá-lo.

Como eu disse no parágrafo acima o ADVLINK é um plugin para o tinyMCE, que simplesmente te poupa o tempo de ir até o código inserir atributos nos seus links, simplesmente alterando o popup padrão de inserção de links do Wordpress por uma popup avançada, que te possibilita inserir praticamente todos os atributos que a tag <a> possui.

Abaixo um exemplo do popup padrão do wordpress quando você clica no botão de inserção de links da barra de ferramentas do editor:

Botão de inserção de link do editor:

tinyMCE Editor - botão adiciona link

Popup padrão de inserção de links do editor:

tinyMCE - popup padrão inserção de link wordpress

E logo abaixo o exemplo de como ficará a popup após a instalação do plugin.

Basicamente a popup ganhará 4 abas, são elas:

  • Geral;
  • Popup;
  • Eventos;
  • Avançada.

Aba - Geral

advlink Aba Geral

Aba - Popup

advlink Aba popup

Aba - Eventos

advlink Aba eventos

Aba - Avançado

advlink aba avançado

Nem precisa comentar os recursos que você irá ganhar não é? Além da facilidade de personalizar as abas como você queira.

Mini guia de instalação do plugin ADVLINK:

Algumas coisas que você precisa saber antes de instalar:

  • As mudanças nos arquivos que irei sugerir são por sua conta e risco, por isso se você não tem muita prática com php e javascript, chame aquele amigão seu pra te dar uma força;
  • Testei em uma versão do Wordpress 2.3 local e não funcionou;
  • A instalação funcionou perfeitamente no Wordpress 2.6 com as modificações que eu fiz;
  • FAÇA BACKUP DE TUDO QUE VOCÊ FOR ALTERAR;
  • Eu não tenho tempo pra te ajudar por isso vou tentar ser bem didático pra que não ocorra dúvidas;
  • No final deste post estarão todas as referências  que usei para a instalação do plugin e o que não tinha na documentação eu deixarei muito bem explicado;
  • Não irei entrar em detalhes sobre a funcionalidade dos arquivos, afinal de contas alguma coisa você deverá estudar não é;
  • Fique tranquilo o mínimo que irá acontecer será os botões do seu editor sumir, e o máximo nem eu quero saber;

O que você precisa baixar?

Baixe a pasta do plugin advlink: http://diegofranco.net/files/advlink.rar

Estou disponibilizando está pasta aqui no meu site com algumas modificações necessárias já feitas, caso você queira pegar um atalho este é o caminho;

Se quiser baixar a pasta original você terá primeiro que baixar o editor tinyMCE completo  no site do desenvolvedor: http://tinymce.moxiecode.com/download.php;

Após baixar a pasta completa do tinyMCE, descompacte-a vá até a pasta:

tinymce_3_2_0_2\tinymce\jscripts\tiny_mce\plugins

lá você encontrará a pasta de do plugin “advlink”.

Quais arquivos você terá que subir que você não tenha no Wordpress?

Você deverá subir a pasta do plugin para o seguinte diretório:

wp-includes/js/tinymce/plugins/

Quais arquivos você irá alterar?

Serão quatro, são eles:


wp-includes/js/tinymce/tiny_mce_config.php
wp-includes/js/tinymce/langs/wp-langs.php
wp-includes/js/tinymce/plugins/advlink/link.htm - (Somente se tiver baixado do site do desenvolvedor)
wp-includes/js/tinymce/plugins/advlink/js/advlink.js -  (Somente se tiver baixado do site do desenvolvedor)

Alteração no arquivo -  tiny_mce_config.php ( wp-includes/js/tinymce/tiny_mce_config.php )

Entre as linhas 60 e 80 você encontrará a seguinte linha de código:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen' );

Os nome acima entre as aspas talvez não sejam os mesmos que estão na sua linha de código, não se preocupe a única coisa que você deverá fazer aqui é acrescentar a palavra “advlink”, no caso acima ficaria da seguinte forma:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'advlink' );

Alteração no arquivo -  wp-langs.php ( wp-includes/js/tinymce/langs/wp-langs.php )

Logo abaixo deste trecho:

$strings = 'tinyMCE.addI18n({' . $language . ':{
common:{

Acrescente as seguintes linhas:

general_tab:"' . mce_escape( __('General') ) . '",
popup_tab:"' . mce_escape( __('Popup') ) . '",
events_tab:"' . mce_escape( __('Events') ) . '",
advanced_tab:"' . mce_escape( __('Advanced') ) . '",
title:"' . mce_escape( __('Insert/edit link') ) . '",
url:"' . mce_escape( __('Link URL') ) . '",
target:"' . mce_escape( __('Target') ) . '",
titlefield:"' . mce_escape( __('Title') ) . '",
is_email:"' . mce_escape( __('The URL you entered seems to be an email address, do you want to add the required mailto: prefix?') ) . '",
is_external:"' . mce_escape( __('The URL you entered seems to external link, do you want to add the required http:// prefix?') ) . '",
list:"' . mce_escape( __('Link list') ) . '",
general_tab:"' . mce_escape( __('General') ) . '",
popup_tab:"' . mce_escape( __('Popup') ) . '",
events_tab:"' . mce_escape( __('Events') ) . '",
advanced_tab:"' . mce_escape( __('Advanced') ) . '",
general_props:"' . mce_escape( __('General properties') ) . '",
popup_props:"' . mce_escape( __('Popup properties') ) . '",
event_props:"' . mce_escape( __('Events') ) . '",
advanced_props:"' . mce_escape( __('Advanced properties') ) . '",
popup_opts:"' . mce_escape( __('Options') ) . '",
anchor_names:"' . mce_escape( __('Anchors') ) . '",
target_same:"' . mce_escape( __('Open in this window / frame') ) . '",
target_parent:"' . mce_escape( __('Open in parent window / frame') ) . '",
target_top:"' . mce_escape( __('Open in top frame (replaces all frames)') ) . '",
target_blank:"' . mce_escape( __('Open in new window') ) . '",
popup:"' . mce_escape( __('Javascript popup') ) . '",
popup_url:"' . mce_escape( __('Popup URL') ) . '",
popup_name:"' . mce_escape( __('Window name') ) . '",
popup_scrollbars:"' . mce_escape( __('Show scrollbars') ) . '",
popup_statusbar:"' . mce_escape( __('Show status bar') ) . '",
popup_toolbar:"' . mce_escape( __('Show toolbars') ) . '",
popup_menubar:"' . mce_escape( __('Show menu bar') ) . '",
popup_location:"' . mce_escape( __('Show location bar') ) . '",
popup_resizable:"' . mce_escape( __('Make window resizable') ) . '",
popup_dependent:"' . mce_escape( __('Dependent (Mozilla/Firefox only)') ) . '",
popup_size:"' . mce_escape( __('Size') ) . '",
popup_position:"' . mce_escape( __('Position (X/Y)') ) . '",
id:"' . mce_escape( __('Id') ) . '",
style:"' . mce_escape( __('Style') ) . '",
classes:"' . mce_escape( __('Classes') ) . '",
target_name:"' . mce_escape( __('Target name') ) . '",
langdir:"' . mce_escape( __('Language direction') ) . '",
target_langcode:"' . mce_escape( __('Target language') ) . '",
langcode:"' . mce_escape( __('Language code') ) . '",
encoding:"' . mce_escape( __('Target character encoding') ) . '",
mime:"' . mce_escape( __('Target MIME type') ) . '",
rel:"' . mce_escape( __('Relationship page to target') ) . '",
rev:"' . mce_escape( __('Relationship target to page') ) . '",
tabindex:"' . mce_escape( __('Tabindex') ) . '",
accesskey:"' . mce_escape( __('Accesskey') ) . '",
ltr:"' . mce_escape( __('Left to right') ) . '",
rtl:"' . mce_escape( __('Right to left') ) . '",
link_list:"' . mce_escape( __('Link list') ) . '",
popup_return:"' . mce_escape( __('Insert - return false') ) . '",

Alteração no arquivo -  link.htm ( wp-includes/js/tinymce/plugins/advlink/link.htm  )

Retire o seguinte trecho “advlink_dlg.” inclusive o ponto de todas as variáveis de tradução. Abaixo um exemplo antes e depois da modificação.

Antes:

{#advlink_dlg.title}
{#advlink_dlg.general_tab}
{#advlink_dlg.popup_tab}
{#advlink_dlg.events_tab}
{#advlink_dlg.advanced_tab}

Depois:

{#title}
{#general_tab}
{#popup_tab}
{#events_tab}
{#advanced_tab}

Alteração no arquivo -  advlink.js ( wp-includes/js/tinymce/plugins/advlink/js/advlink.js  )

Altere o seguinte trecho de código:

html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';

Para este:

html += '<option value="_self">' + tinyMCEPopup.getLang('target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('target_top') + ' (_top)</option>';

Está quase pronto, logicamente depois de ter feito backup de tudo e logicamente de ter salvo as modificações suba todos os arquivos para os seus respectivos diretórios.

O que você irá excluir?

EXCLUA um arquivo compactado em gzip que estiver no diretório:

wp-content/uploads/js_cache/

que deve ser algo parecido com isto: tinymce_0aag3dg84fr6c7dgf532b9t5a277g4d0497.gz ( Se tudo der certo outro será gerado no lugar ).

Prontinho! Vá até o Wordpress na página “Escrever um novo post” ou “Write new post”, adicione qualquer palavra no editor, selecione-a e clique no botão adicionar link na barra de ferramentas do próprio editor, a popup avançada será carregada.

É isso pessoal espero ter colaborado, e logicamente espero que dê tudo certo, se você encontrar um caminho mais curto para a instalação me avise para colocar um update aqui, ou, mesmo que eu não tenha tempo para ajudar não deixe de comentar aqui qualquer problema, pode ser que seja simples, e por meio do próprio comentário eu responda a sua questão.

Referências

Procure por: MP3, iPod, celulares, notebooks, câmeras

[...] Continuar lendo...

Desenvolvimento | 4 Comentários » View blog reactions

Tags | |

Aproveite! Leia isto também:



CSS Hacks para o Firefox 3

Por: Diego Franco - [ July 2nd, 2008 ]

Primeiramente parabéns ao Firefox, mais de 8 milhões de downloads em 24 horas, garantindo o seu lugar no Guinness Book.

Bom, chega de elogios e vamos ao trabalho.

Firefox 3, IE8, este último polêmico por sinal, resumindo, diferente do que a galera do Casseta & Planeta diz: nossos problemas não acabaram! Muito pelo contrário talvez até aumentem só o tempo dirá.

Nas primeiras impressões alguns problemas foram realmente melhorados, principalmente em relação a performance, porém já percebemos comportamentos estranhos em alguns atributos CSS, como por ex.:

Problemas com display:table quebrando DIVS no Firefox 2;
Facilmente corrigido com a substituição por overflow:auto;

Porém nos deparamos com comportamentos estranhos com overflow:auto; no Firefox 3;

Para corrigir use:
Use: overflow:visible;

A medida que encontrar mais problemas com CSS e suas devidas soluções no Firefox 3 vou escrever aqui.

E vamos para a declaração dos HACKS para o Firefox 3, título deste post. Lembrando que você poderá usar Conditional comments, depois falamos sobre este.

A resolução é simples escreva sempre o nome da classe do seu elemento seguido de uma vírgula seguido de x:default { atributos } conforme exemplo abaixo:

Hack for Firefox 3
.nomedasuadiv, x:default { atributos }

Vamos lembrar outros Hacks.

Hack for Firefox 2
.nomedasuadiv, x:-moz-any-link { atributos }

Hack for Internet Explorer 7
.nomedoseuelemento { *display:none; }

Hack for Internet Explorer 6
.nomedoseuelemento { _display:none; }

Hack for Opera
@media all and (min-width: 0px){

.content { }

}

Qualquer problema comentem!

Bons testes!

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

[...] Continuar lendo...

CSS, Desenvolvimento, Firefox, Hacks | 11 Comentários » View blog reactions

Tags | | |

Aproveite! Leia isto também:



Download Day e Firefox 3 lançado!

Por: Diego Franco - [ June 17th, 2008 ]

Download Day

Não poderia deixar este dia passar batido, por isso estou manifestando minha admiração por esse poderoso navegador.

Espero que o recorde seja batido(Quem não acompanhou as notícias atualizem-se) e que mais e mais pessoas possam aderir a esse navegador, inclusive aos nossos companheiros de desenvolvimento.

Firefox 3 lançado e algumas coisas nós esperamos com sua vinda, creio que nenhuma delas é mais importante que a otimização em sua performance, definitivamente precisamos que o consumo de memória caia e claro que fique mais rápido que hoje.

Recentemente foi lançado o novo Opera versão 9.5 sinceramente é surpreendente a rapidez de processamento e o mínimo consumo de memória.

Precisamos hoje de browsers decentes que fazem por merecer suprindo as necessidades tanto dos desenvolvedores quanto as de um simples usuário, não sou um amante do firefox, navego com IE7, com Opera, Safari e outros porém de todos o que mais supre minhas necessidades como desenvolvedor é sem dúvida nenhuma o Firefox, obviamente nunca deixando de realizar os testes necessários nos demais browsers.

Em fim, agora é esperar e ver os resultados!

Pra você que deseja fazer o download do novo Firefox 3 acesse o site oficial.

Pra você que desja fazer o download do novo Opera 9.5 acesse o site oficial.

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

[...] Continuar lendo...

Desenvolvimento, Ferramentas, Firefox | Nenhum Comentário » View blog reactions

Tags | | | | |

Aproveite! Leia isto também:



Clientes que sabem demais, ou eu que não sei nada?

Por: Diego Franco - [ April 16th, 2008 ]

Ser arte-finalista ou designer para web não é coisa fácil, tenho certeza que se você é um deles, tem uma série de boas histórias de clientes, que já lhe pediram para desenhar: um pássaro com todas as suas penas em detalhe; ou aquela camiseta com um linear ou um radial dentro de um círculo(fala sério); e aquele que te manda a foto da sobrinha e diz: “desenhe o rostinho dela…”; ou melhor: “na manga direita coloque isto, na esquerda aquilo, na frente você faz assim, atrás você coloca aquele desenho que te mandei por e-mail, e lá em baixo pertinho da barra você escreve aquela frase”; isso sem contar as mais “belas” combinações de paletas para combinar com a cor da camiseta ou para compor o layout do site(nem me fale).

São muitos os clientes que atendemos e dentre eles vários que sabem o mínimo de conhecimento para opinar e outros claro, que não sabem absolutamente nada, mas, que no fundo do seu âmago juram para si mesmos que são experts em criação e design, ou melhor: “Eu estou pagando, então é assim que eu quero”, esquecem literalmente da interação do usuário com o produto, do impacto visual negativo ou positivo, seja ele web, papelaria ou camiseteria.

Foram várias as experiências que tive com clientes extremamente meticulosos e exigentes, entendidos e leigos no que se refere a design, a verdade é: em dias que ainda ouvimos dizer, “o cliente tem sempre a razão”, até que ponto ele realmente tem a razão? Apenas pelo simples fato de estar pagando ele tem a razão?

E assim devemos aceitar suas opiniões acatando-as? Entendo que antes de pagar, existe a necessidade por parte do próprio da requisição de um profissional para suprir a falta de qualificação necessária e experiência em determinada área para executar uma tarefa.

Mas claro, como bons profissionais cabe a nós a incrível arte de “advogar” pela nobre causa de defender um layout ou uma arte que criamos e convencer prudentemente o cliente que, o que criamos é o que realmente ele precisa, nada mais e nada menos, curto e objetivo, direto no alvo, no foco da peça, e ainda, convencê-lo no final do projeto, que não existira profissional ou empresa melhor a não ser a sua para fazer o trabalho.
Portanto na hora de desenhar um novo layout algumas coisas podem te ajudar a diminuir os problemas que levam a reprovação de uma peça:

  • - O cliente já possui identidade visual? Meio caminho andado, procure ser prudente para não sair da mesma linha de raciocínio respeitando o material enviado, é quase certo que você não poderá mudar nada. Neste caso, na maioria das vezes uma aprovação logo na primeira amostra é quase certa.
  • - O cliente não possui nenhuma identidade visual, nem logomarca, mas respondeu o briefing. Sinceramente eu não arriscaria nem um minuto do meu tempo, tudo bem que o cliente respondeu o briefing passou algumas referências, direcionou o foco, mas você poderá ter problemas com cores, e aplicação de elementos, por exemplo: linhas retas ou curvilíneas? Sendo assim prudentemente não arrisque, seja um profissional, entre em contato com o cliente e solicite o material necessário para dar início ao projeto deixando-o ciente da importância disto e caso ele não tenha logomarca sugira no mínimo; se você não cria logomarcas, alguém gabaritado para desenvolvê-la para ele, com ela será possível ao menos iniciar o desenvolvimento.
  • - O cliente tem apenas a logomarca, mas ainda não respondeu o briefing. Posso iniciar o desenvolvimento? Eu digo que sim, mas, todavia, no entanto, entretanto, algumas dúvidas poderão surgir durante o desenvolvimento. O que você irá absorver serão apenas referências de cores, uma leve noção do tipo de público e de linhas que poderá usar: retilíneas ou curvilíneas por exemplo. Particularmente eu não avançaria tanto, deixaria uma margem de tempo para qualquer tipo de modificação ou surpresa que o briefing ou o cliente revelasse.
  • - A logomarca do cliente é horrível e não vai mudar. Alguns clientes são bem fechados para mudanças, não aceitam opiniões e assim se torna difícil, mas neste caso nem sempre são exigentes com a aprovação, portanto seja um bom profissional e capriche no layout, quem sabe ele se impressione e veja que a logomarca está totalmente ultrapassada.
  • - O cliente enviou a logomarca passou várias referências, mas tem se mostrado indeciso na suas escolhas. Muitas referências principalmente se forem bem diferentes uma das outras, podem ou não lhe ajudar no desenvolvimento de um layout. Neste caso converse bastante com o cliente, é visível que ele precisa de ajuda para centralizar seu raciocínio e chegar num consenso em relação ao design. Talvez nesta hora você precise praticar um pouco de AI (Arquitetura da informação), mostrando para o cliente a importância da disposição dos elementos, a necessidade do usual, do acessível, a preocupação direta com o usuário, levando-o a compreender que o maior interessado em seu produto é o usuário final, desviando um pouco o foco do design, mostrando que nem tudo são cores, bordas, imagens grandes, pequenas etc…, entenda que passar segurança para o cliente é de extrema importância, mostrar-se um verdadeiro profissional que entende do que está falando. Se o cliente por acaso sentir que você está inseguro em suas argumentações, esqueça, ele vai pedir pra você “pintar o sete” no seu design. Acredite.

Não se pode nos dias de hoje ser simplesmente um Designer de Interface, Webdesigner ou Arte-finalista somente, vivemos dias onde o mercado está exigindo que você traga um algo mais, o “plus”, o “extra”, o que realmente fará a diferença na hora de apresentar uma peça publicitária seja ela web, papelaria ou qualquer outro tipo de mídia. Precisamos conhecer o usuário/cliente, como ele pensa, quais são seus comportamentos, quais os principais pontos que determinam a sua satisfação, ele é base para a execução do seu trabalho.

Os pontos acima são meras dicas baseadas em experiências, a busca incessante por novas tecnologias, metodologias, estudos em bases de conhecimentos deve ser constante, para que você se mantenha atualizado. Por exemplo, acho extremamente importante que HOJE o Webdesigner possa ao menos saber o que é: Feed, AJAX, .Net, PHP, CMS, SEO, Semântica, IIS, Apache, MySQL, SQL, XHTML, CSS, Javascript, Web Standards, Padrões Web, W3C, XML, AS2, AS3, Arquitetura da Informação, Folksonomia, Taxonomia, TAGs, Psicologia das Cores, Webwriter, IP, DNS e mais uma porção de coisas que daria para listar aqui.

Talvez você webdesigner não concorde comigo, e olhe que nem expus minha opinião sobre o que realmente webdesigners deveriam aprender. Sinceramente, designers para web pagos somente para criar layouts? Sem saber XHTML? Sei que isto é possível, mas POR FAVOR o mercado quer que você dê o algo mais, já ouviu falar em “experiência”? Conhecimento NUNCA será demais. O que você tem a perder adquirindo conhecimento? Já deu uma olhada nas qualificações que ultimamente o mercado anda exigindo na sua área?

Procure por: DVD, MP3, LCD, Plasma, HDTV, Home Theater

[...] Continuar lendo...

Briefing, Comportamentos, Criação, Desenvolvimento, Padrões Web, Webdesigner | Nenhum Comentário » View blog reactions

Tags | | | |

Aproveite! Leia isto também:



Foto DiegoO Modelando é o site pessoal do Diego Franco Miguel que, atualmente, trabalha como Designer e lidera uma equipe de Agência Web na Webroom Soluções Interativas. Diego é Designer de Interface é especialista em XHTML e CSS, vetorização em CorelDraw, criação de logomarcas, VB for Excel. Gosta de se aventurar em programação ASP.NET, PHP, AS2 e AS3 e procura sempre escrever aqui a fim de colaborar com essa imensa base de conhecimento que são os Blogs.

Me encontre também aqui:

Confira também:

Blogroll:

Sites que eu leio com frequência (Vou atualizando aos poucos)

Pessoas que trabalham comigo:

Sites dos colegas de trabalho da Webroom.

Já trabalharam comigo:



Twitts

Se preferir receba atualizações do site por e-mail. Preencha o campo abaixo com seu e-mail e clique no botão Enviar.

Added Delicious!

Veja mais!

Tags