Visual Dicas

segunda-feira, 22 de agosto de 2016

Visual Dicas

W3.CSS o framework que você precisa conhecer!

Posted: 21 Aug 2016 06:43 PM PDT

Frameworks, devo usar?

Para quem já é um pouco experiente em programação, conhece e/ou já utilizou frameworks. Frameworks são muito usados por programadores para desenvolverem softwares ou websites com qualidade e segurança de maneira rápida e eficiente.

Vantagens em utilizar frameworks

Padronização do desenvolvimento - componentes prontos e padronizados.
Velocidade de desenvolvimento - não precisamos reinventar a roda em cada projeto.
Qualidade - os principais frameworks do mercado são testados e mantidos por comunidades de programadores experientes.
Manutenção - as linhas de códigos são padronizadas e estruturadas facilitando encontrar o que precisamos.

Desvantagens em utilizar frameworks

Curva de aprendizagem - em função de trabalharmos com códigos de terceiros precisarmos de tempo para aprender.
Dependência e limitações do sistema utilizado.
Performance - dependendo do framework utilizado os aplicativos podem ficar lentos ou "pesados".

Mas o que é um framework?

Framework nada mais é do que uma biblioteca formada pela união de vários projetos de software com códigos comuns. Um framework serve para promover uma funcionalidade genérica, criando componentes prontos que facilitam o programador no desenvolvimento de uma aplicação. Existem vários tipos de frameworks, ou seja, bibliotecas específicas para JavaScript, PHP, CSS, Java, entre outras linguagens de programação. Neste artigo vamos falar de um framework CSS.

O que é framework CSS?

Como dissemos anteriormente, um framework é uma biblioteca pré-preparada com códigos comuns. Frameworks CSS são bibliotecas que se destinam a facilitar o desenvolvimento de websites, usando a linguagem CSS (Cascading Style Sheets).

Existem vários frameworks CSS, sendo o Bootstrap e o Foundation os mais utilizados. Veja no link a seguir uma tabela com os principais frameworks CSS atuais - A Collection of best front End frameworks for.

Para acessar os sites dos melhores Frameworks CSS do mercado, clique no link do nosso Portal: Visual Dicas - Frameworks CSS

Atenção:

Para utilizar qualquer framework CSS é necessário ter conhecimento em HTML e CSS.
Frameworks são limitados pela sua própria tecnologia, e portanto, para algumas soluções mais elaboradas será necessário recorrer a outras linguagens de programação, como JavaScript, PHP, e jQuery, por exemplo.

W3.CSS framework

Neste artigo vamos apresentar o W3.CSS, um framework CSS bem novo e moderno. O W3.CSS é um framework desenvolvido e mantido pela W3schools. O framework W3.CSS além de ser totalmente gratuito, agiliza e facilita muito o desenvolvimento de páginas web responsivas .

Por que utilizar o W3.CSS?

Veja a seguir as principais vantagens em utilizar o W3.CSS, segundo sites e blogs especializados em programação:

Mais simples e rápido que outros frameworks CSS.
Fácil de usar e de aprender.
Extremamente leve - usa apenas CSS padrão.
Dispensa o uso de JavaScript ou jQyery.
Foco em "Mobile First" - desenvolvido primeiro para celular e depois adaptado para o desktop.
Design responsivo - feito para todos dispositivos (celular, desktop e tablet), mas especialmente para dispositivos móveis.
Acelera aplicativos HTML móveis.
Possui recursos diferenciados dos demais frameworks CSS.
Desenvolvido com base em "Material Design" - padrão visual criado pelo Google com foco na simplicidade e na funcionalidade - https://material.google.com/#
É gratuito e não precisa de licença para a sua utilização.

Utilizando o W3.CSS

Para iniciarmos uma página usando o framework W3.CSS precisamos primeiramente adicionar o link para o endereço do framework: <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Para aproveitarmos o design responsivo, devemos informar também o navegador que a página deverá ser ajustada para qualquer dispositivo que esteja sendo utilizado. Para isto adicione a tag: <meta name="viewport" content="width=device-width, initial-scale=1">

Finalmente, adicione a tag meta charset para definir o padrão dos caracteres: <meta charset="utf-8">

Portanto, a estrutura básica da nossa página poderá ficar conforme o exemplo abaixo:

<!DOCTYPE html>   

<html>
  
<head>  

<title>Minha página website com W3.CSS</title>  
 
<meta charset="utf-8">  

<meta name="viewport" content="width=device-width, initial-scale=1">
  

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">  
  
</head>
  
<body>
  
<h1>Usando o W3.CSS</h1>
  
<body>
  
</html>

A partir daí, a sua página já estará utilizando o framework. Algumas tags já estarão padronizadas automaticamente, como a tag <h1> que colocamos no exemplo acima, que já assumirá a fonte e dimensões definidas pelo framework.

Agora, é só inserir as classes do W3.CSS para acrescentar os componentes desejados na sua página web. Para conhecer todos os componentes disponíveis do framework, acesse o link: http://www.w3schools.com/w3css/

Veja a seguir a lista dos principais componentes prontos que você poderá inserir no seu site:

No nosso Portal Visual Dicas, iremos mostrar como utilizar todos os componentes do W3.CSS e também de outros frameworks como o Bootstrap. Aguardem!!!

byALF