Aula 1 - Desenhista de Páginas para Web

Olá, caros leitores! Eu ganhei uma bolsa no Senai do curso Desenhista de Páginas para Web e vou estar relatando aqui com vocês sobre as aulas e dando algumas dicas do que eu for aprendendo. Então se você é blogueiro, web designer ou pensa em seguir por essa série acompanhem, serão ao todo 20 aulas de curso e para cada uma delas teremos um post aqui.

Queria começar dizendo que a ideia de trabalhar com edição web não é novidade para mim, desde que criei meu primeiro blog a anos atrás eu precisei correr atrás de códigos HTML para editar visual, funcionalidades, etc. Em 2017 eu ganhei bolsa no Senac desse mesmo curso e foram 3 meses aprendendo a construir sites, algo que nunca imaginei que iria fazer para ganhar dinheiro. Aprendi muito naquelas aulas, mas sentia que faltava algo. Posso dizer que essa aula que tive no Senai foi bem melhor, mas vamos ver as próximas antes de comparar.

As aulas ocorrem no sábado em horário integral e até imaginei que ficaria até massante e cansativo, mas o tempo passou que eu nem vi. Fomos apresentados a instituição e ao curso, que na verdade é para programador de página para web. Não tem nada haver com desenho, hein? É de construir sites mesmo e muita gente se confunde.

No curso, iremos aprender conhecimentos e HTML, CSS e PHP, que é utilizado para compor o Front End, as páginas que o usuário final vê. Também teremos uma base de SQL e Javascript para compor o Back End, onde apenas o administrador tem acesso através de servidores de hospedagem.

Um conceito interessante que foi abordado é o da Internet das Coisas, que é a comunicação de aparelhos diferentes conectados a internet. Em breve eu faço um post detalhando mais sobre isso, mas o que você precisa ter em mente é: na hora de construir um site, pense em todos os dispositivos que existem. Celulares, tablets, notebooks, computadores, etc. São vários tamanhos e formatos de tela e o que você cria precisa se adequar a todos eles. Já entrou num site e percebeu que ele se encaixa em qualquer dispositivo? É chamado de responsividade, a página se adapta a qualquer tela.

A primeira coisa que você precisa ter em mente antes de começar qualquer projeto é sobre as necessidades do cliente. O que ele quer com o site? Quais são seus objetivos? Ele já sabe o que terá nesse site depois de pronto (conteúdo, imagens)? E você precisa ter um sistema de estruturação. Depois de analisar as necessidades do cliente você cria um escopo do projeto: layout, tempo estimado, imagens e textos a serem usados, fontes, custos, etc.

Quando você vai formular o orçamento de um cliente, você precisa pensar nos aplicativos da adobe que irá utilizar, se será necessário comprar licença de imagens e vetores, comprar template, hospedagem e domínio, preço por hora. Por isso não dá para dizer um orçamento logo de cara, "ei, quanto custa um site?". Isso é muito aleatório, cada site exige um esforço diferente e você precisa repassar ao cliente os gastos que tiver. Claro que isso é mais pra frente, quando a galera querer se tornar freelancer e trabalhar autônomo com criação de sites.

Nossa primeira atividade foi propor uma ideia de site com base na necessidade de um cliente fictício que quer uma loja virtual de roupas masculino, feminino, melhor idade e itens infantis. Além de moda, engloba calçados e acessórios. Como são os sites de vestuário? O que eles tem em comum? Como eu poderia fazer diferente? Aqui o que vale é a criatividade. 

Estudamos sobre a estrutura básica do HTML e algumas tags. Lembrando que HTML é uma linguagem de marcação e você consegue fazer uma página simples usando seu bloco de notas.

 
Salve o bloco de notas e tire o txt e substitua por .html. Se você abrir esse arquivo, ele aparecerá no seu navegador - mas ninguém consegue ver sua página, apenas quando se hospeda que é possível. Para quem quiser saber mais, recomendo a leitura do Guia HTML para Iniciantes que explica em mais detalhes.

Vimos também um pouquinho de CSS e fomos treinando como alterar o fundo da tela, adicionar imagens, deixar texto em negrito, itálico, etc. Para ver lista de tags, acesse o Comandos e Tags do HTML5.

Nossa segunda atividade consiste em criar uma página sobre alguma música e ela precisa ter 2 imagens. Vou fazer com a tradução da música Decode, do Paramore. Na próxima semana eu mando a vocês sobre a 2ª aula e mostro o resultado a vocês. Deixo uma videoaula que encontrei de um professor do Senai para aqueles que queiram estudar sozinhos. Abraços e até a próxima!