michele.valongo

Plugin do Axure no Chome

2011-08-23T15:24:00.001-03:00

Post rapidinho só pra dar uma dica... Hoje aqui no meu new job, o pessoal do atendimento iria levar o protótipo que fiz para o cliente analisar. Ao abrir o protótipo na máquina dele o Chome pediu para instalar o plugin do Axure. Ai o pessoal pediu pra eu resolver esse "problema" rapidinho porque já estava na hora da apresentação. Bem, eu uso o Axure 6... Procurei como renderizar o protótipo na versão 5... Não achei! E agora?! Fui olhar o código que está por trás do meu protótipo... E... Achei! Gente, é uma besteira!

Vamos lá! Procure por:

$(window).bind('load', function () {
                if (CHROME_5_LOCAL && !$('body').attr('pluginDetected')) {
                    window.location = 'resources/chrome/chrome.html';
                }

Então é só comentar a linha que contém:

window.location = 'resources/chrome/chrome.html';

É isso! Post rapidinho. Vou fazer mais posts assim.

Abraços,

Michele Valongo

Moodle introdução

2011-02-21T11:20:00.000-03:00

Este será o primeiro de muitos posts sobre o LMS Moodle, um software livre, que é uma ferramenta de apoio à aprendizagem executado em ambiente virtual.

Se você não sabe o que é o Moodle ou ainda não teve contato com ele, este vídeo explica de uma forma bem legal o que é o Moodle:

Irei expor aqui dicas e soluções conforme elas irão surgindo no meu dia-a-dia, pois a introdução aos recursos ou a administração do Moodle já tem aos montes (e free) na rede e eu acho mais interessante e produtivo, comentar sobre coisas novas ou menos usuais.

Espero que aproveitem. Até a próxima!

Poeira...

2010-12-28T23:25:00.000-03:00

Cof, cof!! Este blog está cheio de poeira! :P É... Eu tinha prometido que a vida deste bog iria ser mais agitada, mas não aconteceu não é?! Não vou escrever os motivos, pois não adianta! :P Pois bem, esse ano de 2011 eu PROMETO que vai ser diferente. :D

Para este ano de 2011, estou bolando uma séria com dicas do Moodle, wordpress e infografia. Além dos outros assuntos que geralmente surgem no dia-a-dia quando aparecem aquelas broncas que todo web designer, front-end, back-end e etc (todas as outras ramificações, e ou nomenclatura, que nossas profissões permite) já conhecem.

Aproveito este post para desejar um feliz ano novo a todos.

Visualizando sites em browsers diferentes

2009-09-15T22:57:00.001-03:00

Cutucando um pouco mais na ferida dos bwosers... Volto à velha bronca que irrita e muito os web designes: a falta de um padrão na renderização dos sites em diferentes browsers.
Já dei a dica do IEca... :D Mas agora eu volto com uma "solução" para os outros browsers. Os outros que eu falo não são só os mais utilizados, como o Firefox, Safari e Opera não... Eu falo dos OUTROS (Flock, K-Meleon, Minefield, SeaMonkey e etc)!

E aquela pergunta que não quer calar... "Como visualizar meu site em diferentes browsers?!" Tã-dãn!! Eu tenho uma dica! \o/

No site BrowserShot você escolhe quais browsers quer que ele renderize que ele (não sei como) acessar o site por tais navegadores e vai te exibir a imagem de como o site é renderizado na tela. Além disso tem as opções dos sistemas operacionais diferentes também e algumas configurações que você pode alterar como: tamanho da tela a ser mostrado, qualidade da cor, se o JavaScript vai está habilitado ou não e etc.

Não sei se é 100%, mas pelo menos com os navegadores mais comuns, que eu testei, deu tudo certinho. Abaixo tem um screenshot do resultado para meu site.

Até a próxima!

SEO Check list

2009-08-13T23:05:00.009-03:00

Olha só que infográfico interessante que eu encontrei um dia desses!

Fonte:Alliance SEO services

É uma lista de verificações para você analisar antes de o enviar seu site para web! É um SEO check list! ;)

Aproveita e passeia pelos outros infográficos que tem lá nesse site. São simples, porém bem interessantes.

Até a proxima! ;)

IE7 e 6 executando ao mesmo tempo?!

2009-07-03T20:42:00.028-03:00

Olá pessoal!
Demorei mas voltei a postar. Só que desta vez eu venho com uma dica pra os desenvolvedores.

Bem ha um tempo atrás eu estava com um probleminha. Fiz um site que rodava bem no Firefox, no Opera, no Safári, no Netscape, no Google Chome, no IE 7... Até ai tudo bem até ficar sabendo que cerca de 80% dos meus usuários utilizavam o IE e destes, 26% utilizavam o IE 6. Diante destas informações eu precisava ter na minha máquina o IE 6. Mas como?! Se o IE 7 estava instalado e eu não podia regredir ainda mais trocando o meu IE 7 (que não é lá essas coisas) pelo IE 6! Pensando um pouco, e claro, utilizando o nosso amigo Google descobri a solução! :]

O nome da solução é o Multiples IE. Ele é um software desenvolvido e fabricado pela Tredosoft, que dá a possibilidade de instalar não só o IE 6, mas também IE5.5, IE4.01, IE5 e o IE3 ! A instalação é fácil e até agora não tive problemas com ele, nem encontrei ninguém falando algo de significante.

Tela de instalação do Multiples IE

Sei que o IE 6 é obsoleto como o 7 está pra ficar também, mas para nós desenvolvedores é importante pensar em nossos usuários, que não estão tão preocupados em atualizar seus browsers (atitude errônea já que essas atualizações vem mais segurança) e sim navegar na internet.

Se interessou? Então baixa logo! :]

Baixar Mutiples IE

Notas:

O Multiples IE foi desenvolvido para rodar no Windows XP;
O Multiples IE não funciona no Windows Vista. Caso queira rodar nativamente o IE 6 no Vista dê uma olhada nesse site.

Outra possibilidade de testar o seu sistema não só em browsers diferentes, mas também em plataformas diferentes, vem do site http://browsershots.org que possibilita você ver screenshots do seu site. É só acessar o site colocar o endereço e esperar alguns segundos. O problema é que tem que estar online.

Abraços e até a próxima!

Jornada [S2B] - Students To Business

2008-11-29T17:51:00.025-03:00

Bem pessoal,

Como algumas pessoas devem ter notado eu não posto aqui no blog faz um bom tempo. Pois bem, o motivo eu revelo e com muito orgulho! :D Durante os dois mêses passados eu participei de mais uma versão do S2B - Students to Business da Microsoft. E a jornada foi longa, puxada e gratificante. Sim! Eu fui até o fim! E como eu estou muito feliz de ter ido até o fim, não poderia deixar passar irei contar toda minha jornada. :D

Bem... Tudo começou quando eu pesquisava na internet sobre um software da Microsoft e acabei caindo num blog (que eu não lembro mais...) que comentava sobre o [S2B] e tinha um link que direcionava para o site do Centro de Inovação. Fui ao site, li e não acreditei! O curso era de graça! Com profissionais certificados! Uau! Mas... O candidato teria de passar por três etapas para conseguir o certificado de conclusão e se fosse o melhor ganharia a gratuidade para realizar a prova de certificação Microsoft. Então vamos às etapas...

1ª Etapa (A inscrição...)

Como eu já havia comentado, mas explicando melhor... Um dia na sala de aula entrou uma moça da faculdade dizendo que iria ter uma palestra com o pessoal da Microsoft que iria explicar sobre o Student To Business... Ai eu pensei - Puts! Vai ser concorrido... E mesmo que eu tentasse só vai entrar o pessoal "cobra", logo eu saio de primeira! Não vou nem ver o que é esse programa. :

Na mesma semana buscando na internet sobre o Microsoft Vision e acabei caindo num blog meio que sem querer e vi no post a o tal [S2B] fiquei curiosa e li... Gostei do q li no blog e cliquei no link que levava pra a página de inscrição do programa... Ai pensei: - Poxa... Custa nada... É só se inscrever aqui pela internet... Vou ver se eles me selecionam!

No dia marcado pelo resultado da seleção eu tava era nervosa, mesmo com poucas esperanças, mas sabe né?! A esperança é a ultima a morrer! :D Bem, entrei no site, cliquei no link "Classificados para a 1ª etapa", digitei meu CPF e... Tan, dan, dan-dan... Meu nome tava lá! Aaaaa... Nem preciso falar né?! :D

Mais tarde recebi um e-mail do Centro de inovação... E o subject era "Primeira Fase S2B - Olinda‏”! Ai li no e-mail que eu tinha que comparecer a faculdade AESO no dia 07 de Outubro pra assistir a palestra e logo depois fazer uma prova que seria eliminatória. Estudei (passei o olho só) lógica de programação e C#.

No bat-horário e no bat-local eu tava lá, assistindo a palestra. Depois das palestras fomos todos para algumas salas de aula para realizarmos a prova. Quando me levantei que olhei pra traz o auditório tava cheio! Tomei um susto! Pois até a hora que eu cheguei e sentei na primeira fileira não estava daquele jeito! E que daquele monte de pessoas só sairiam 60 de Desenvolvimento (a categoria que eu tava concorrendo). Tivemos 30 minutos para responder a prova de + ou - 40 questões, se não me engano.

2ª Etapa (A seleção)

Pra dar aquela variada eu nervosa com o resultado, mas desta vez mais confiante devido a prova realizada, no dia do resultado entrei no site do Centro de Inovação de novo e.... Tan, dan, dan-dan... Meu nome tava lá de novo! U-hu! Só que desta vez eu tinha que solicitar a minha chefe para me ausentar pela parte da manhã não por um dia como foi a etapa passada e sim uma semana... Ui... Fui lá expliquei a ela e... Ela concordou! :D

Ai começou as aulas... No primeiro dia a sala se apresentou... A maioria era de Sistema de Informação ou Ciência da Computação! : Enquanto o povo se apresentava eu pensava: - Dessa vez vai ser difícil! Ai chegou minha vez de se apresentar (eu era quase a ultima)... - Teu nome e o que você faz? Bem... Meu nome é Michele Valongo e eu sou WEB DESIGNER! Vrruuum! A sala toda virou pra vim! Me senti " o patinho feio" ou "a intrusa no ninho". Fora isso ache a aula legal! :D

Já no segundo dia de aula... Puts! Foi muuuuito puxado. Pra se ter idéia algumas pessoas já não foram no 3º dia! Cheguei no trabalho desanimada. Confessei para minha amiga Silvia que achava que dessa vez não ia dar. E ela disse o seguinte: -Ei mocinha! Pare com isso! Eu não quero guardar meus pompons! Chegando em casa a noite confessei pra minha mãe também e ela disse outra frase que marcou: - Eu acredito em você. Sei que você é inteligente e que vai até o fim!

Puxa vida! Essas duas frases me encheram o ego. Eu senti que não só pra mim, mas até mesmo pra mostrar a muitos (que espero que estejam lendo também!) que eu sou muito mais do que eles pensam!
No final das duas semanas que passou foi realizada a prova. Essa prova foi um pouco complicada, pois foi cancelada por duas vezes. Mas no geral eu me senti tranqüila, pois eu estava sabendo do assunto.

3ª Etapa (A etapa final)

Essa foi à etapa mais difícil! Pois tínhamos que desenvolver um projeto e apresentar no final. Eu e meu grupo (Vinícius e Valdi) desenvolvemos um sistema de controle de atendimento médico (tema sugerido). Passamos o maior aperto por que tínhamos apenas uma semana pra desenvolver o sistema e todos estávamos em prova/projetos e com muito trabalho em seus respectivos empregos.

No dia 22 de Novembro é chegado o dia da apresentação. Eu nervosíssima e o sistema dando "pau" pra não deixar a lei de Murphy de lado! Mas no mais foi!

Na sexta, dia 28 de novembro, saíram às notas... Eu particularmente não entendi direito, mas depois eu pergunto lá na formatura que vai ser dia 01 de dezembro (eu acho). O que importa pra mim, neste momento é que eu cumpri o meu objetivo! :D
Gostaria de aproveitar e agradecer a todos os que acreditaram em mim e me deram força pra seguir até o fim. Marli (minha mãezinha) que ta sempre me incentivando e tinha certeza que eu conseguiria, Silvia minha amiga que tava lá o tempo todo com o "pompom" dela torcendo, aos meninos da faculdade que souberam entender minha ausência nos trabalhos, enfim... Tem tanta gente!
Os que eu não coloquei não fiquem com raiva não ta?! Agradeço também aos que duvidaram que de uma forma ou de outra me deram um motivo a mais pra seguir... Mostra que eu não sou apenas uma "menininha" na informática.

Resumindo... Não fiquei no primeiro lugar! Pra falar a verdade nem sei minha classificação ainda! Hehehehe... Mas não importa. O que importa é que eu cheguei ao meu objetivo.

Beijos.

Meu Coração é Forte!

2008-08-15T23:17:00.008-03:00

Sim! Meu coração é forte! Quem disse que não é?! :D

Brincadeiras a parte... Pensando nesta frase e inspirada numa imagem da Internet, gerei um coração em 3D no Blender. Eu achei bonitinho... E vocês?

Pra visualizar ele em 360º clica na imagem!

Infográfico?! O que é isso?

2008-06-22T11:49:00.002-03:00

Tá bom... Eu falo aqui infográfico pra lá infográfico pra cá, mas nem todo mundo sabe o que é!
Então resolvi falar um pouco sobre o que seria infografia.

Quando eu comecei a trabalhar com educação a distância não sabia o que danado era isso, porém logo descobri que eu já tinha visto vários só não sabia o nome! :D

Infografia

"Infográfico é a representação visual da informação."

Sabe aqueles desenhos legais que normalmente vem na revista Superinteressante (na Veja também tem muito), explicando alguma coisa que normalmente seria bem difícil de entender (e chato) e de se explicar apenas com texto? Pronto! Eles são Infográficos! Está vendo... Você conhecia o tal do infográfico! Só não sabia o seu verdadeiro nome! ;)

Pois bem, o infográfico serve para auxiliar o texto a explicar certo assunto. Ele tem a função de facilitar a comunicação entre o leitor e o tema proposto. E é um ótimo recurso para descrever processos, pra fazer analogias e para explicar coisas que são grandes ou pequenas demais. Deve ser usado com coerência e necessita ter um bom texto (que não seja longo), ter início, meio e fim.
Normalmente é utilizado como complemento de uma informação, como elemento gráfico, ou sendo ele mesmo a própria informação.

A tendência na web, pelo menos o que eu tenho notado, é que eles geralmente são animados (em flash), mas não é uma regra. O legal é que por ser animado torna dinâmica a interação com o usuário.

Sites:

http://infografando.blogspot.com/
http://cursoabril.abril.com.br/comunidade/materia_77959.shtml
http://www.yaso.in/?p=116
http://www.facom.ufba.br/jol/pdf/2004_ribas_infografia_multimidia.pdf

http://g1.globo.com/Noticias/Tecnologia/0,,MUL633876-6174,00.html
Tem mais no Google... http://www.google.com.br/search?hl=pt-BR&rls=ig&q=infografia&btnG=Pesquisar&meta=

Exemplo de infográfico da revista Superinteressante: http://super.abril.com.br/revista/extras/254/si182_supernovas_metrodorock.pdf
Como fazer infografia: http://www.colaborativo.org/blog/2008/05/27/infograficos-e-infografia-como-fazer/

Bom... É isso! Até a próxima!

Infográfico: competências e habilidades

2008-05-11T11:45:00.006-03:00

Mais um infográfico desenvolvido em parceria com minha amiga, a designer Silvia Viegas. Este faz parte da aula de Carreiras e empregabilidade do curso de EAD (educação à distância) da Faculdade Maurício de Nassau.

A idéia é um quadro negro e o conteúdo é escrito ao passar a tela por um giz.

Como eu sou suspeita pra falar alguma coisa dele, então dá uma olhada no infográfico e me diz o que vocês acharam.

Tags html desconhecidas

2008-03-02T11:49:00.036-03:00

Olá pessoal,

Assistindo um dia desses a aula de Programação Web, que não tem nada haver com programação, e que também não vem ao caso agora... Percebi que há algumas tags html que andam bem esquecidas ou desconhecidas.
Alguns exemplos destas tags foram citadas na aula, e poucas pessoas sabiam para que elas serviam. Até mesmo os que já sabiam html não tinham conhecimento destas tags. Eu mesma confesso que conheci esta e outras a pouquíssimo tempo e isso se dá a dependência do nosso bom e velho Dreamweaver que codifica tudo pra nós.
Com essa "nova moda" de acessibilidade alguns desenvolvedores de web tem se aprofundado um pouco mais em html e xhtml, principalmente os autodidatas, e descoberto o maravilhoso mundo das tgas! :D

Então vendo esta situação resolvi listar aqui algumas tags html desconhecidas e outras até conhecidas para clarear as idéias de todos vocês interessados. Caso falte alguma tag podem me dar um toque que eu coloco aqui ok?!

<abbr> - Utilizada para dar um significado adicional a palavra. Sendo que nesta tag a utilização é feita em Inicialismo (Ex: CSS e IE) e abreviações (Ex: adj = adjetivo).
Ex: CSS (passe o mouse em cima).

<acronym> - Utilizado para acrônimos (Redução de uma locução que funciona como palavra. Ex: OTAN é um acrônimo para Organização do Tratado Atlântico Norte).
Ex: OTAN (passe o mouse em cima).

<address> - Utilizada para formatação de endereço. Normalmente formatada pelos browsers como itálico pode ser modificada via css.
Ex: <address>michelevalongo@hotmail.com

<address> - Define informações de contato de um documento ou de uma seção. Ela NÃO deve ser usada como descrevendo um endereço postal, a menos que seja uma parte das informações de contato. Os browsers por padrão apresentam esta tag em itálico e adicionam uma quebra de linha antes e depois do elemento endereço.
Ex: <address> <a href="mailto:michelevalongo@gmail.com">Michele Valongo </a> </address>

<blockquote> - Utilizado para citações longas. O W3C recomenda edita-lo no css e colocar aspas no início e no fim da citação, pois o IE não renderizam as aspas. Não é recomendado utilizar esta tag apenas para dar endentação.
Ex:<blockquote>Ser ou não ser, eis a questão </blockquote>
<q> - Citações curtas.
<em> - Tag utilizada para dar ênfase. Por padrão ela é formatada nos browsers com itálico.
Ex: <em>Michele Valongo </em>
<code> - Utilizada para escrever códigos. Para entrar código nos comentários além de usar o elemento CODE você tem que codificar o caractere > com &l t; (sem espaço).
Ex: & lt; html> esta é a tag < html> (sem espaço entre & lt; e html).

Para quem quiser estudar mais deixo aqui alguns sites que usei como referência:

http://www.maujor.com/tutorial/estilizar-elementos-abbr-e-acronym.php
http://www.w3.org/TR/html401/index/elements.html
http://www.ime.usp.br/~andrers/aulas/web2005-1/aula3.html
http://www.w3schools.com/

Espero ter ajudado. Beijos!

Infográfico - Célula Tronco

2008-02-17T15:45:00.014-03:00

Este é mais um dos infográficos que eu ando fazendo lá no trabalho. Ele é uma breve explicação sobre as células tronco. Neste eu usei também 3D (Blender) como artifício visual.

Mais uma vez eu não fiz só, pois somos uma dupla (dinâmica!) e em "uma dupla" como é de praxe existem duas cabeças pensantes. O design foi de Silvia Viegas e a animação e 3D foram meus. Este infográfico explica um pouco sobre a célula tronco.

Foi divertido faze-lo e como em todo infográfico que faço sempre aprendo algo a mais, não só de conteúdo, mas de técnicas também.

Abaixo tem mais dois infográfico que eu fiz já faz um tempinho. Foi o início de tudo...

Infográfico - Perfil do Estilo de Vida Individual
Infográfico - Separação CMYK

Abraços.

Endereço novo

2008-02-09T21:05:00.001-03:00

Bem pessoal...

Como alguns já notaram, eu estou com um endereço novo (http://www.michelevalongo.com.br), porém ele ainda está em fase de construção. Por isso alguns de vocês foram automaticamente redirecionados ao meu blog (pra cá!). Em breve meu site vai estar pronto com meus trabalhos, contatos e o que mais eu inventar de colocar. :D

Pretendo continuar com o blog mas, acho que vai ser com outro intuito estou estudando umas possibilidades ai... Mas nada de contar agora!

Beijos!

Feliz Ano Novo!

2008-01-02T14:44:00.001-03:00

Feliz Ano Novo Pessoal!

E para comemorar este ano que inicia eu fiz um cartão virtual para presentear meus amigos. Acho que alguns já viram em seus e-mails, mas quem não viu ou não recebeu tai ai pra vocês também!

Beijos!

Projeto do site PE Alternativo

2007-11-21T11:39:00.001-03:00

Caros colegas,

Este é um projeto meu e de JK para a faculdade que provavelmente irá pro ar. Foi um projeto para a disciplina de Ferramentas Web que eu pensei que iria tirar 10, porém o professor resolveu tirar um ponto não sei de quê, mas paciência! Pra mim e meu amigos ele ta dez! Não só o layout ta legal como o código ta certificado pela W3C como XHTML 1.0 Transitional. E é isso que vale muitas opiniões.

O PE Alternativo será um site sobre o espaço musical de Pernambuco que irá ter agenda de shows e eventos, lista de bandas, notícias, download, comentário sobre álbuns, etc. O conteúdo ainda não foi fechado, mas a vontade de ir pro ar é grande e tem muita gente interessada em ajudar no projeto, com isso logo, logo ele vai estar "de verdade" no ar. Eu falo "de verdade" porque quem quiser dar uma olhada de como ele ficou pode dar uma no PE Alternativo, que ta na fase beta.

Então... Resolvi postar meu trabalho nota "nove" pra que todos dêem a sua opinião. Fiquem a vontade.

Beijos!

Meus Quadros...

2007-11-15T20:28:00.001-03:00

Devido aos elogios constantes dos meus amigos, resolvi colocar aqui os meus quadros para que todos possam apreciar a boa arte! (hehehehe...) :D
Eu tinha parado por um tempo, mas estou decidida a voltar a pintar. A minha primeira obra de arte data de 12/06/2002 e se chama "O caminho", ela é bem especial pra mim e a mais bela, em minha opinião pelo menos.
Tenho mais 8 quadros terminados e um que faz um tempinho que eu não trabalho nele, pois eu tava pintando para meu avô só que não deu tempo de terminar para ele ver em vida ai eu parei de pintar... Desde esse dia não pinto mais, só que agora com tantos elogios e incentivo para que eu retome as minhas atividades artísticas eu resolvi! Vou voltar! :D

Agradeço a todos os elogios e o incentivo dado. Valeu povo!

"O caminho" - Óleo sobre tela 50x40

12/06/2002

"O paraiso na praia" - Óleo sobre tela 40x60 cm
??/07/2002

"Girasois de Marli" - Óleo sobre tela e textura 1,20x80 cm
??/??/2002

"Valongo atracado" - Óleo sobre tela
??/08/2002

"Vista da praia" - Óleo sobre tela 10x15 cm
??/??/2003

... Agora acho que posso assinar como Michelangela Valongh. :D

Infográfico Ciclo Da Água

2007-11-09T08:52:00.005-03:00

Um infográfico que eu fiz no flash sobre o ciclo da água.
O design foi da minha amiga a designer Silvia Viegas e a animação foi minha.
É bem 1º grau, mas ta bem legal. : )

Desenvolvimento de Projeto Web

2007-09-28T10:30:00.000-03:00

Pois bem! Para iniciarmos a nossa série de tutoriais iremos falar hoje um pouco sobre Gerenciamento de Projeto, que é de grande importância para o bom desenvolvimento do site. Nem sempre um site “bonitinho” é sinônimo de um site acessível, por isso é importante antes de iniciar um projeto estudá-lo muito bem.

Iniciando! Mas como?!

Normalmente quando temos um site pra fazer o primeiro pensamento é – Vou correndo sentar no computador pra desenvolver este site! Ops! Ai é que está o GRANDE erro ao se iniciar um website. Eu confesso que eu já fiz isso, mas já me consertei.
Ao iniciar o site direto pelo código você esta pensando apenas em você e no seu cliente. Aí você me diz: - E não estou certo?! E eu digo: - Claro que não! Porque você esta fazendo o site não para o cara que te contratou, mas para os clientes dele.
Como é a percepção desse usuário sobre o produto do seu cliente? Qual é a média de idade dele? Qual o seu grau de conhecimento sobre Internet? Hum?! - Então como eu devo agir? – você me pergunta. É necessário estudar as necessidades e expectativas do público alvo.

Por etapas

Existem seis fases que devem ser seguidas para desenvolver um site bem estruturado. São elas:

Levantamento do escopo;

Planejamento;

Desenho do wireframes (esboço);

Desenvolvimento;

Aprovação;

Testes.

Levantamento do escopo
Pesquisando...

Nada mais é do que juntar todas as informações que você tem sobre seu cliente (o que vai te pagar) como: briefing, textos, fotos e etc. É também aqui onde nós vamos entrevistar os usuários do site, onde vamos fazer aquelas perguntas feitas acima.
Esse tipo de pesquisa pode ser feito direto com o cliente, ir mesmo atrás pra conversar, enviar por e-mail um questionário. Ou antes de colocar o site no ar, inserir uma página com um formulário e suas perguntas. Corra atrás do usuário!
Uma boa também é pesquisar outras empresas que ofereçam o mesmo produto para buscar inspiração e saber como se apresentam na Internet. Mas lembrando que se apenas existem sites “fracos” não quer dizer que você deve diminuir a qualidade. Também não vale copiar o layout, né?

Planejamento
Vamos pensar um pouco!

Planejar ou arquitetar o site é aquela parte onde você irá “organizar” o projeto, não deixando que as pessoas “se percam” nele. Se esta parte não estiver bem estruturada lá na frete os problemas virão à tona tomando assim mais tempo. Um exemplo é: você passou pela etapa do planejamento e foi para a execução do trabalho (a parte mais legal!), aí quando está no bem bom você percebe que uma informação deixou de ser apresentada e não tem mais lugar pra ela no seu layout. E agora?! Fazemos uma gambiarra ou um puxadinho! Não, né? Assim você acabou com a arquitetura do seu site. Todos perceberão que aquela informação foi “jogada” ali.

Com o planejamento você diminui a possibilidade do usuário “se perder” no seu site e desistir ou esquecer o que ele procurava. Informações simples e rápidas são o que o cliente quer. Textos enormes, por exemplo, assustam o usuário, cansam a vista e etc, mas isso agente fala depois.

Desenho do wireframes (esboço)
Puxa, estica, arruma...

Wireframes?! Para alguns esboço, mas não é porque é esboço que precisa ser feio e mal feito! Risque, rabisque, pinte e etc depois refaça bem bonitinho e veja se funciona. Estruture o conteúdo de cada página, indicando o peso e a importância de cada elemento do layout e a sua relação com os demais elementos que formam o todo. Lembrando que o wireframe serve para mostrar a funcionalidade e não o aspecto gráfico (layout).

Exemplo de wireframe

Aprovação
Ui! Ttan-dan-dan...

Pronto! Agora vem a parte chata... Levar pra o seu cliente (o que paga) para ele aprovar seu trabalho. Se você for uma pessoa iluminada ele vai aceitar logo e pronto. Mas pode ter certeza que normalmente (eu digo sempre!) ele vai dar uma de flanelinha pedindo pra você puxar tal coisa um pouco mais pra esquerda ou descer mais um pouquinho é sempre assim... Você volta pra casa e dá um “jeito”. Porém, seja forte. Vá armado (no bom sentido, é claro), tenha uma boa explicação para tudo que foi colocado no site. Seja mais esperto! Só não use termos técnicos demais para não constranger seu cliente.

Desenvolvimento
Ebá! Diversão! U-hu!

Aqui é a parte legal, porém a que mais nos estressa. Se você é o Web-jedi (o faz tudo) aí é que sofre, mas gosta! Depois de terminado navegue por ele, se concentre nesse momento esqueça que você sabe onde as coisas vão ficar. Teste se funciona ou então peça ajuda de alguém para testar e ir apontando o que acha que não tá legal.

Testes
Fim!

Calma, calma, estamos quase lá...
Antes de publicar o site faça teste. Coloque no ar, mas num local reservado e, se possível, proteja o diretório para apenas os que têm a senha possam acessar e testar.

Ps: Se você não sabe proteger um diretório pelo painel de controle é só postar um comentário pedindo que eu explico.

Bom pessoal espero que tenham gostado! Caso haja alguma dúvida ou eu tenha deixado de falar alguma coisa postem aqui, ok?!

Meus agradecimentos a Silvia Viegas que me deu uma força com o texto! U-hu! :P

Abraços a todos!

O inicio de tudo...

2007-09-19T11:41:00.001-03:00

Como este é o meu primeiro post, eu não tenho muito que dizer... Então vou dar uma breve descrição do que vocês irão ver aqui daqui pra frente.

Irei utilizar este blog com o intuito de publicar meus trabalhos e alguns tutoriais sobre desenvolvimento de web e suas ferramentas e alguma coisa sobre maquete digital (Auto Cad).

Meu conhecimento é restrito, mas o que eu sei e o que eu irei aprender de hoje por diante será postado aqui para que os que começaram como eu comecei, com a cara e a coragem e quebrando a cara, possam achar aqui um "help!".

Então fiquem de olho os "iniciantes" em webdesign, pois agora irei passar meus conhecimentos a diante!

Beijos