Blog

O que é preciso saber para desenvolver um site?

Por Markus Domenegheti

O desenvolvimento de sites, com certeza, já tem seu lugar consolidado no mercado. Caso você esteja começando agora, e ainda fique perdido nessa imensidão de informações, este post poderá ajudar. Ele também é destinado a quem deseja entender melhor o que acontece por trás dos sites.

Baseado em minha trajetória como front-end, vou citar o que é preciso saber para desenvolver um site sem usar temas prontos.

HTML
O HTML (HyperText Markup Language ou, em português, Linguagem de Marcação de Hipertexto) é usado para a estruturação do site. Ele define menus, links, imagens etc.

Além de estruturar, o uso correto do HTML possibilita:

  • Melhor indexação em mecanismos de busca (como o Google, por exemplo).
  • Melhor usabilidade para usuários com deficiência visual.
  • Compatibilidade entre navegadores.

Muito se fala, atualmente, em HTML5, e esse termo pode confundir um pouco, mas saiba que nada mais é do que a versão 5 do HTML, que foi lançado oficialmente em outubro de 2014, e trouxe uma série de melhorias e novas funcionalidades.

CSS
O CSS (Cascading Style Sheets, ou folhas de estilos em cascata) é a linguagem usada para estilizar o HTML. Através dele são definidos: tamanho de fonte, cores de fundo, design de botões etc. A ideia é identificar o elemento HTML que deseja, e aplicar suas propriedades e valores. Sua última versão é o CSS3.

O CSS também é responsável por:

  • Media queries, usadas para diferenciar o tamanho da tela e aplicar propriedades específicas para cada uma.
  • Compatibilidade entre navegadores
  • Efeitos de mouseover (sobreposição do mouse) e outros efeitos visuais em geral.

JQUERY
O jQuery é uma biblioteca de funções da linguagem Javascript. Geralmente usado para manipular modals, telas de loading, validações de campos (como e-mail e telefone) entre outros. O uso do jQuery também possibilita utilizar diversos plugins (que nada mais são que recursos prontos, como parallax) baseados no mesmo.

Tecnicamente, o jQuery possibilita:

  • Retornar em tempo real características do cliente, como tamanho de tela, dispositivo usado, navegador etc.
  • Detectar interações do cliente no site, como clique, rolagem da tela, sobreposição do mouse etc.
  • Aplicar efeitos básicos como esconder ou mostrar algum elemento e criar animações (muito usado).
  • Também usado para operações mais complexas, como o AJAX, que possibilita fazer requisições de dados ao servidor e mostrar na tela, sem atualizar a página.

PHOTOSHOP
O Photoshop, que você já deve conhecer, é o editor de imagens mais famoso do mundo. Seu uso é fundamental para o desenvolvimento de websites. É nesse formato (PSD) que, geralmente, recebemos o layout do designer. Acrescenta muito ter conhecimento sobre esta ferramenta, o suficiente para conseguir criar seu próprio layout, e uma boa bagagem de criatividade e bom senso também é valiosa.

Para o desenvolvimento de websites, o Photoshop permite:

  • Exportar as imagens separadamente no formato que melhor atender à necessidade, como JPG, PNG, GIF etc.
  • Obter com facilidade valores de altura, largura, cor, texto, entre outros.
  • Criar o layout dentro de grids, usados para aumentar a coerência do layout e facilitar o desenvolvimento responsivo (para todos os tamanhos de tela).

Para deixar bem claro, o Photoshop não é responsável pela geração do HTML e CSS de um site.

É importante ressaltar que existem mais editores de imagens que cumprem a mesma função do Photoshop no desenvolvimento de sites, como GIMP, Fireworks, entre outros, mas são menos presentes no mercado.

WORDPRESS
É a ferramenta responsável por transformar seu site estático em um site com conteúdo dinâmico. Isso significa que o usuário pode manipular o conteúdo.

Através de um painel administrativo, possibilita o uso de diversas funcionalidades prontas e, se precisar ir além delas, o material disponível para estudo na internet é gigantesco. Segundo o W3Techs, mais de 29% de todos os sites do mundo são em Wordpress, incrível não?

O uso do Wordpress possibilita:

  • Criação de blogs com comentários, categorias e tags.
  • Uso de URL amigável (para não ficar: .php ou .html no final do link).
  • Acesso a uma infinidade de plugins (recursos prontos), como formulários de contato e ferramentas para SEO por exemplo.

A grande dificuldade do Wordpress é fugir dos temas prontos e aplicar seu próprio layout. Novamente, ressalto que existem outras ferramentas semelhantes, como Joomla e Drupal.

HOSPEDAGEM
A hospedagem é um serviço de armazenamento on-line que possibilita que seu site seja acessado na internet a qualquer momento. A escolha e a configuração corretas do serviço são essenciais para o funcionamento do site.

Junto com a hospedagem, o registro do domínio (que nada mais é que o endereço do site) e a configuração dos e-mails (pertencentes ao domínio) complementam esse serviço.

Para finalizar, existem ferramentas, como o XAMPP, que simulam hospedagens em qualquer computador, muito recomendado para ambientes de desenvolvimento, por facilitar diversos processos.

Markus Domenegheti

Desenvolvedor Front-End 

Formado em Sistemas de Informação, trabalha como desenvolvedor front-end há 7 anos. Especializado em HTML, SASS, jQuery, Responsive Web Design, Cross-browser e Wordpress, já participou de projetos com clientes de grande expressão como BASF, UOL e Dow AgroSciences.

Encontrou algum erro ou algum problema em sua navegação por nosso site?