Recebi esta pergunta, e é uma pergunta que pode, em determinado momento, passar pela cabeça de muitas pessoas:

Tenho andando a investigar e queria descobrir sobre a área de Web design, mas como tu sabes isto na faculdade só se dá programações mais orientadas a software e não web design, eu andei a custar WordPress, MAMP
Queria aprender um pouco disto e conseguir também entender como se faz, conheço um pouco de html5 , não tenho jeito nenhum de javascript nem css eu gostaria saber sites de referencia que tu tenhas ou mesmo livros se tiver que comprar desde que sirvam para a vida!

As possibilidades da criação de sites são quase ilimitadas e é naturalmente apetecível surgir a ideia “e se eu aprendesse a fazer sites?”, em resposta a essa pergunta, aqui fica uma opinião sobre o que é preciso para ser um web designer.

Alô primo!

É bem, isso do web design.

Inicialmente precisas de saber:

HTML – saber o que cada elemento quer dizer, para os usares de forma adequada. O HTML5 trás novos elementos e como estás a começar agora deves conhece-los e usa-los quando adequado.

CSS – Depois, aprendes  Css, interessa-te saber CSS3 que é a versão mais recente e tem uma série de novidades.

Depois, podes escolher, ou aprofundas as CSS, estudando os pre-processadores de CSS como o LESS ou SASS, que permitem programar as CSS com variáveis, tornando o trabalho de escrever e manter css mais fácil ou… passas para a programação.

na programação existem 2 campos que te interessa conhecer. A programação no lado do cliente (JavaScript) que permite fazer animações, esconder e mostrar elementos na página,etc. e talvez devesses começar por aí, porque quase todas as páginas fazem uso do javascript.

Com isto consegues fazer páginas web.

Depois de fazeres um site com estas tecnologias, vais querer dar o passo seguinte, que é aprender uma linguagem server-side. A mais difundida linguagem é o PHP (é o que o WordPress usa), a linguagem server-side permite que o teu site se torne dinâmico, por exemplo em vez de escreveres 200x a mesma coisa, podes no servidor gerar com um loop “for $i=1;$<201;;$i++{ doSomething(); }”, outra vantagem é começares a ir buscar conteúdos a outros sites, ou aceder a uma base de dados, ou enviar mails, … Nestas linguagens server-side podes escolher (PHP, Python, Java, Javascript, C#, Perl,…) como disse o PHP é o mais usado e o que está disponível na maior parte do servidores e no teu MAMP a letra P quer dizer PHP.

No PHP tens 2 caminhos: Ou começas por aprender o PHP Object-Oriented ou começas por aprender de forma mais pratica as funcionalidades que mais te interessam (como por exemplo interagir com uma base de dados mySql).

Com este conhecimento, podes fazer um site muito poderoso e aconselho que cries uma versão melhorada do 1º site que te sugeri que fizesses.

Depois disto, interessa-te saber que para cada uma destas tecnologias existem frameworks que facilitam o trabalho e encorajam a escrever bom código. Nesse ponto interessa-te saber sobre o jQuery(Javascript), TwitterBootstrap (frontend framework), e uma framework PHP (Codeigniter,…).

Depois começas a brincar com misturar estas frameworks todas de forma a arquitectares a tua webapp (já não é um simples site).

E não falámos em aprender sobre base de dados e arquitectura de informação, nem falámos de “Search Engine Optimization” (SEO) que é fundamental para um site de sucesso… este pontos podes aprender em qualquer altura (porque não dependem dos conhecimentos tecnológicos em ambiente web).

Num aparte, o SEO mais eficaz é sempre construir páginas com html de qualidade e honesto. Se seguires esta regra, as tuas páginas vão estar sempre bem nos motores de pesquisa. Quando começas a condicionar a página para chamar/enganar os motores de pesquisa, esse sucesso tende a ser temporário porque os motores de pesquisa vão refinando os algoritmos e a única coisa que não falha é uma página semanticamente bem construída com conteúdo real e pensado.

Tudo isto no web design representa metade do caminho, ou seja a parte web, fica a faltar a parte de design. O design, é uma área enorme (há licenciaturas só em design) e há muito para aprender: tipografia (o uso das fontes), espaço negativo, whitespace,  ritmo vertical, teoria da cor, contraste, equilíbrio, proporção e tudo o que faz a diferença entre dois sites que fazem a mesma coisa, mas um é feio/difícil e ninguém o usa e outro que é bonito/fácil e tem grande adesão.

Depois… tens as ramificações, como preocupações de acessibilidade para pessoas invisuais conseguirem usar o teu site, ou por exemplo, fazer jogos em html+javascript (os browsers estão cada vez a melhorar os seu motores gráficos openGL e já se consegue fazer muita coisa – procura three.js). Ou tens a vertente mobile, os telemóveis, têm muitas apps que são feitas com html+css+javascript. Mesmo que não vás para a área de fazer apps mobile, se fores fazer um site convém experimenta-lo num smartphone e aí podes aprender sobre “responsive” layout, que é a capacidade do teu site se adaptar da melhor forma possível ao espaço de ecrã disponível para mostrar o conteúdo.

Exemplos:

(aumentar o número de clientes, aumentar as vendas de secadores em 15%, tornar a minha marca mais conhecida, difundir a ideia “X”, juntar pessoas interessadas em “Y” para mudarmos o mundo, fazer um jogo do tipo WoW, um sítio para exprimir as minhas opiniões, construir um livro de receitas, difundir conhecimento sobre mecânica, criar um motor de pesquisa,…) e depois pensar, como é que no fim de ter o site feito e em funcionamento consigo avaliar se o meu trabalho cumpriu o objectivo delineado?

Links:

Deixo alguns links que costumo acompanhar, mas para aprender… costumo googlar e seguir por aí.

• http://alistapart.com/ – óptimos artigos
• http://www.webdesignerdepot.com/ – recursos frescos diariamente
• http://sixrevisions.com/
• http://www.w3schools.com – quando queres aprender sobre alguma coisa, eles costuma ensinar. (nem tudo o que lá está é totalmente verdade, mas a grande maioria é e uma página fácil de usar)
• Para um sem número de api de linguagens e frameworks: http://devdocs.io/
• Eu tenho andado a por as coisas que vou encontrando e que muitas têm a ver com web design no site https://loflab.org (dá-te um aviso de segurança do ssl, mas está tudo bem, podes entrar)

E pronto, não é bem o que estavas à espera que respondesse, não te indiquei um manual em vez disso esbocei um mapa das áreas que podes/deves/tens de conhecer para fazer web design. Aliás, vou colocar este mail no meu blog e talvez o vá melhorando com informação que me vá lembrando 🙂

SMILE – Apesar de ser um mundo de coisas, não fiques desencorajado, porque começar é muito fácil e a evolução faz-se naturalmente. Fazes bem começar com o MAMP (ou Xampp em windows), depois podes usar um editor como o Netbeans para programar as páginas.

Por fim, esta área está cheia de modas e tendências, de repente toda a gente na net te diz que tens de usar isto ou aquilo, que tens de fazer desta ou daquela maneira. É bom saber o que propõem, porque reflecte a opinião de pessoas que sabem muito, mas não sigas às cegas 🙂

Abraço!