Categoria: Criação de SIte

O que são HTML e CSS e para que servem

Para fazer um site, o planejamento é um dos passos mais essenciais e vai impactar de modo direto no impacto do seu projeto, e principalmente, no retorno financeiro.

Um site bem estruturado, rápido, e com conteúdo relevante e que agregue valor ao público-alvo, pode fazer várias vendas e diversas oportunidades. Dessa forma você precisa fazer um site fantástico!

Mas o que acontece se você quer aprender a estrutura básica de um website? Neste artigo, vamos falar sobre HTML e CSS, que é a estrutura básica de qualquer website.

Se você quer aprender a desenvolver sites inteligentes, aconselhamos este curso de desenvolvimento PHP.

HTML (HyperText Markup Language)

Ao contrário do que muitos podem acreditar, HTML não é uma linguagem de programação mas sim uma linguagem de marcação, como seu próprio nome diz. Ela foi criada na época em que os cientistas e militares estavam começando a substituir informações sobre os cálculos computacionais.

De uma forma bem direta, a linguagem é um conjunto de marcações e códigos para definir como um conteúdo será formatado e exibido.

Imagine uma revista.

Uma revista possui sua aparência, suas cores, títulos, sumário, no momento em que o assembleia termina numa passagem, todo o conteúdo é inserido através de tags em HTML. Isso são regras de formatação, um conjunto de modelos, ordens, para que o artigo seja proposto. É a marcação, a formatação do conteúdo.

Este é o trabalho do HTML, cuidar da disposição, e do conteúdo.

CSS

Até há alguns anos atrás, em todo layout que você criava, tinha que replicar em todas as páginas. Isso significa repetir muito código como a cor das fontes, imagem de fundo, figuras e tudo que se refere ao jeito da aparência. Imagine um portal que possui milhões de páginas.

Isso realmente seria muito trabalhoso e tornaria a manutenção do site impossível.

E quem criava o artigo, tinha que se recriar jeito dos artigos anteriores e por sua vez, continuar repetindo código. Porém, para nossa felicidade, hoje em dia usamos um conceito conhecido por CSS (Cascade Sheet Style), que é uma série de regras que definem como o conteúdo será exibido para o usuário final.

O principal benefício do CSS é que reúne todas as orientações de layout em um único local. Por isso, caso você queira modificar a forma como seu site é exibido, basta você modificar apenas os arquivos CSS.

Torne seu site otimizado para celular agora; 3 maneiras

Ter um site compatível com dispositivos móveis não é apenas uma boa prática – é um pré-requisito. Pela primeira vez na história, o celular excedeu o uso da Internet no desktop, de acordo com a comScore.

O celular agora excede o uso da Internet no desktop.

O celular agora excede o uso da Internet no desktop de acordo com a com Score.

Os usuários de dispositivos móveis agora esperam uma experiência otimizada para o dispositivo. Quase metade dos consumidores dizem que não retornarão a um site se ele não for carregado corretamente em seus dispositivos móveis.

Em 21 de abril de 2015, o Google anunciou que começaria a usar sites otimizados para dispositivos móveis como um sinal de classificação. Isso significa que, se um site não for compatível com dispositivos móveis, logo haverá uma diminuição nos rankings nos mecanismos de pesquisa.

Se você não tiver certeza se seu site é ou não compatível com dispositivos móveis, o artigo ” SEO: sites compatíveis com dispositivos móveis não são mais opcionais ” mostra como compará-los com os novos critérios do Google.

Se você testar seu site e ele falhar, veja aqui duas maneiras de otimizar seu site para celular rapidamente, além de uma maneira de criar um site otimizado para celular a partir do zero.

1. Crie uma versão móvel do seu site atual

A maneira mais rápida de tornar seu site otimizado para celular é criar uma versão para celular do seu site para computador usando uma plataforma de conversão como o bMobilized ou o Duda Mobile .

Crie uma versão móvel do site usando plataformas como o Duda Mobile.

Crie uma versão móvel do site usando plataformas como o Duda Mobile.

Embora essa seja uma maneira simples de colocar seu site em conformidade, é necessário que você tenha dois sites diferentes. Pode ser difícil atualizar dois sites e os usuários podem ficar frustrados se encontrarem menos conteúdo ou informações disponíveis na versão para dispositivos móveis do que na área de trabalho.

2. Use plug-ins móveis em plataformas populares de CMS

Os sistemas de gerenciamento de conteúdo de sites mais populares – WordPress, Joomla ou Drupal – têm soluções prontas para tornar seu site otimizado para celular sem a necessidade de duas versões separadas. Alguns incluem maneiras adicionais de personalizar a experiência móvel para não apenas fornecer o conteúdo, mas incorporar outros recursos mais usados ​​em dispositivos móveis.

WordPress Mobile Plugins . O WPtouch é um dos melhores plug-ins para sites do WordPress que procuram adicionar uma experiência móvel personalizada. Ele fornece uma versão paga  que contém recursos adicionais para sites de comércio eletrônico. O JetPack é a solução do WordPress.com para implementar um tema móvel simples para garantir o acesso móvel aos seus sites.

O WP Touch é um dos melhores plug-ins para sites do WordPress que desejam adicionar uma experiência móvel personalizada.

O WPtouch é um plugin para sites do WordPress que procuram adicionar uma experiência móvel personalizada.

Joomla Mobile Plugins . O Responsivizer e o JoomlaShine contêm maneiras simples de levar a funcionalidade móvel ao seu site. Isso pode ser necessário apenas se você estiver usando uma versão mais antiga do Joomla, como 2.5 ou inferior. O Joomla 3.x vem com suporte para sites móveis.

Plugins móveis Drupal . O Drupal oferece dois módulos – ThemeKey e MobileTheme – que detectam se um usuário está em um dispositivo móvel e alterna automaticamente o tema do site para uma aparência mais amigável. Ambos fornecem interfaces fáceis de usar quando você os instala.

O Google criou um guia útil para tornar seu site otimizado para celular, bem como uma lista de guias para outros sistemas de gerenciamento de conteúdo.

3. Use um design responsivo para dispositivos móveis

As soluções acima são apenas medidas temporárias até que você possa reformular seu site implantando uma estratégia para dispositivos móveis usando  práticas de design da Web responsivas .

Projetar o site com uma abordagem mobile-first requer planejamento sobre como ele será usado em dispositivos móveis – um exercício que ajuda a priorizar o conteúdo do site. Ele também levanta a questão de que, se não for necessário em dispositivos móveis, deveria estar na versão desktop?

O design responsivo fornece a melhor experiência possível no nível móvel, mas permite melhorias no design e na funcionalidade do site à medida que aumenta o tamanho da tela.

A abordagem de plug-in ao design de website compatível com dispositivos móveis, mencionada anteriormente, não leva em conta o fato de que você pode apresentar uma experiência inconsistente para usuários em outros dispositivos, algo que você pode evitar o uso de design responsivo.

Exemplo de site usando design responsivo.

Um exemplo de um site usando design responsivo.

O design responsivo garante que seu site esteja em conformidade com qualquer tamanho de tela ou dispositivo. Não importa o tamanho do dispositivo usado – smartphone ou tablet – você tem um site semelhante e consistente com a versão para desktop.

Faça o que fizer, faça agora

Cada opção tem prós e contras, mas, na minha opinião, é melhor otimizar seu site para dispositivos móveis antes de planejar uma atualização. Na realidade, não faz mal reavaliar seu site atual e enfeitar as coisas.

Se você precisar de ajuda para planejar seu conteúdo durante a reformulação, leia o artigo ” 9 etapas do planejamento do conteúdo do site “. Se o site não era compatível com dispositivos móveis antes, é muito provável que ele também seja atualizado no conteúdo e no design.