A magia do Front-end

Front-end

Faz tempo que eu não venho aqui né? Pois é, resolvi trazer um conteúdo pra não perder o costume, e como estou meio desatualizado de outros assuntos resolvi trazer sobre algo que estou em constante contato, a web.

O que é front-end?

Muitos dizem, equivocadamente que back-end é a programação, e front-end é o design/layout. Pois, javascript também faz parte do front-end. Eu diria que front-end é o visual do teu site, sintetizando: a interface.

O que faz parte do front-end: HTML, CSS, JavaScript, Conceito Ajax, ColdFusion (CFML), entre outros.

O desenvolvedor front-end

Quem desenvolve para esta camada deve se assegurar a compatibilidade cross-browser e cross-platform. Cross-browser é quando a interface funciona em todos os (ou na maioria) navegadores, e seguindo a lógica, cross-platform, seria para diferentes plataformas (desktop, tablet, mobile), o que nada mais é o conceito responsive.

Também deve se preocupar com web standards e técnicas de SEO.

Web Standads - design patterns para web

Conceito utilizado para uma padronização da web W3C. É aquela velha história, você não precisa seguir padrões de projeto, mas é sempre bom, aliás, ótimo. Web Standards se resumo em regras que você deve seguir ao criar sua interface, por exemplo: você sabia que ao dar instruções em um formulário, se deve usar a tag <aside>? Isto é um exemplo fútil, mas, todos os meta tags de um header também são web standards, assim como usar <footer> para o rodapé e <nav> para menus são padrões de HTML5, e preferir a unidade de medida "em" ao invés de "px", padrões CSS.

Aprendendo um pouco

Se você se interessou e deseja aprender um pouco mais, aqui segue alguns sites/blogs que abordam alguns assuntos interessantes.

Maujor (http://maujor.com/): aborda css e design patterns.

Tableless (http://tableless.com/): aborda html/html5, css, e design patterns.

Web Standards Blog (http://webstandards.blog.br/): aborda design patterns em geral.

The magics

Aqui falarei um pouco de frameworks e utilitários que fazem a magia do front-end acontecer de verdade. Simplesmente co-autores da interface web moderna.

Frameworks JavaScript com foco em desenvolvimento

      jQuery

O mais famoso framework para JavaScript. Acho que todos já sabem o que é, até leigos de web já devem ter ouvido falar. Não é pra menos, é uma das mais intuitivas bibliotecas que já se foi criado para uma linguagem de programação. Existem centenas de milhares de plugins para jQuery disponíveis hoje, e esse número só cresce. Ou seja, opções não faltam.

Site/documentação: http://jquery.com / http://api.jquery.com

      MooTools

É um framework para JavaScript auto descritivo: compacto e modular. Em minha concepção uma ótima alternativa o jQuery para projetos pequenos.

Site/documentação: http://mootools.net/

     Prototype JS
Pra ser sincero, apesar de conhecer já de longa data, não tenho uma experiência com Prototype, mas ele é basicamente um framework para JavaScript simples e compacto como o MooTools.

Site/documentação: http://prototypejs.org/

Frameworks JavaScript com foco em interface

      AngularJS

"HTML enhanced for web apps!". Feito nada mais, nada menos pela Google, o AngularJS utiliza de JavaScript para dinamizar seu HTML, ou seja, o foco é o HTML. É extremamente útil pois te dá a possibilidade de escrever arquivos em html dinâmicos, com loopings, condições, e muito mais. É simplesmente fantástico o que ele faz.

Site/documentação: http://angularjs.org

Frameworks para front-end em geral

     Bootstrap

Bootstrap ou Twitter Bootstrap é um dos mais famosos frameworks para front-end, arriscaria dizer que é o mais famoso. É composto por CSS, plugins jQuery e uma fonte para icones (Glyphicon). No site tem uma ampla documentação.

Curiosidades: o site do shadowcores é feito inteiramente com bootstrap 2.3, utilizando até o template padrão. O TibiaKing Blacklist é feito com bootstrap, e nosso downloader de clientes de tibia também, mas já com um template customizado. O site do AngularJS citado acima é feito inteirinho com bootstrap, ou seja, a Google o-utilizando. 

Site/documentação: http://getbootstrap.com/

     UIKit

Uikit é outro framework para front-end em geral, composto por CSS, JS e uma fonte para icones (FontAwesome). Por mais que o bootstrap seja famoso, EU considero o uikit melhor. Mais simples, mais bonito, e mais intuitivo que o bootstrap.

Site/documentação: http://getuikit.com/

     Foundation

Sem segredo, faz basicamente o que o Bootstrap e o UIKit fazem, mas é muito pouco intuitivo e com muitas restrições. Sem falar que ainda contém alguns bugs e consideravelmente "menos bonito". Possui uma gama de opções para responsividade, que parece ser um dos focos do zurb com o foundation.

Sites/documentação: http://foundation.zurb.com/

     jQuery UI

jQuery User Interface, também um framework front-end. Apesar de focar mais em interações com o usuário utilizando o jQuery, também tem o seu CSS padrão, com as opções de temas, mas não oferece auxílio à parte de estrutura de layout (grid, nav, buttons, etc).

Já teve seus "anos de ouro", e já foi muito usado. Mas hoje não consegue competir com o Bootstrap e com o Uikit, que estão muito mais avançados do que o jQuery UI, que parece ter parado no tempo. Mas enfim, para projetos pequenos e simples usos pode ser até a melhor escolha.

Curiosidades: o ModernACC utiliza este framework para sua interface, e se você já conhece o jQuery UI já deve ter percebido de cara.

Site/documentação:

Utilitários em geral

JSFinddle

"Finddle" é um novo conceito que o JSFinddle traz, lá você pode testar como ficaria uma combinação com o Html/Css/Js, o tripé front-end. É um utilitário muito bom, pois você pode usá-lo tanto para testar e tanto para "mostrar" alguém, pois assim como o pastebin e o gist, ele também pode ser salvo em um permalink (link permanente).

Site: http://jsfinddle.com/

DivShot
DivShot é um editor visual de front-end. Nele você monta seu layout em cross-browser e cross-platform, utilizando do Bootstrap, Foundation e do Ratchet (Mobile). Com o perdão do pleonasmo, ele é espetacularmente espetacular, o seu único problema é que pode parecer confuso à primeira vista, pois tem uma poluição visual com tantas opções, funções, botões e informações. Mas ao decorrer da prática, pode ser muito útil.

Site: http://divshot.com/

É isso ai galera, listei aqui os mais importantes que lembrei no momento. Editarei caso lembre de mais alguns, e vocês também podem sugerir outros, adoro conhecer mágicos novos (=

Abraços!