Nos últimos 8 anos, os sistemas de grid CSS vem ganhando destaque pela atenção que o layout responsivo tem recebido. E estou estimando esse tempo, com base na data de lançamento do twitter boostrap (19 de agosto de 2011). Essa seria a minha referência, em relação ao início forte de discussões sobre boas práticas para layout responsivo, frameworks e bibliotecas para esse fim.## Sistema de gridO sistema de grid é uma estrutura que permite o alinhamento de elementos da página com base em colunas e linhas sequenciadas.O formato com 12 colunas tem sido o mais utilizado, por causa da flexibilidade proporcionada e por ser capaz de dividir o layout uniformemente. Na divisão por 2, 3 e 4, temos uma serie de modulações disponíveis (2x6 , 3x4) e várias outras combinações.O número de colunas pode variar dependendo do projeto. Quanto maior o número de colunas, (por exemplo, 16 ou 24) maior a quantidade de possibilidades para divisão.[960 Grid System](https://960.gs/), considerado o rei do **grid** por muitos anos, tem a seguinte estrutura:- Largura total de 960px. - 12 colunas - Largura de 60px em cada coluna. - Cada coluna tem 10px de margem esquerda e direita. Sendo 20px de espaço entre as colunas. - A área total do conteúdo é de 940px. - 16 colunas - largura de 40px em cada coluna. - Cada coluna tem 10px de margem esquerda e direita. Sendo 20px de espaço entre as colunas. - A área total do conteúdo é de 940px. - 24 colunas - largura de 30px em cada coluna. - Cada coluna tem 5px de margem esquerda e direita. Sendo 10px de espaço entre as colunas. - A área total do conteúdo é de 950px.Uma das principais razões para a popularidade do **960 Grid** com os designers é a sua flexibilidade. Os designers podem usar uma ampla gama de colunas, com o número máximo de 24.Funcionou muito bem no começo e ainda funciona até hoje, porque a maioria dos projetos tem o tamanho de fonte definido em 12px. De uns anos para cá, que a maioria dos layouts estão sendo definidos com tamanho de fonte de 13px ou superior.Como o tamanho da fonte aumentou, é necessário aumentar a área de conteúdo e ajustar o espaço entre as colunas. Com a evolução das boas práticas na experiência do usuário e uma variedade de novos dispositivos, o sistema de grid foi ganhando uma infinidade de variações. Ex: O **Bootstrap**, acima de 960px, usa a largura de 1140px para área de conteúdo no tamanho **wide**.Sendo encontrado com facilidade na internet, os sistemas mais comuns. Lembrando que o projeto terá uma necessidade e o sistema poderá ser livremente customizado.## Levando o layout CSS ao próximo nívelQuem já trabalha com layout CSS, há muitos anos, já deve ter visto muito `float: *`, `display: table`, `display: inline-block`, para montar uma grade na estrutura ou em um simples menu. Desde 2015, o suporte dos navegadores mais relevantes para o **Flexbox**, tem sido excelente. O **CSS Grid**, tem sido bem recebido pelo navegadores, desde 2017. É claro que não considero o **IE**, para falar de suporte as novas tecnologias, mas o suporte a esse layout que tem feito muitos desenvolvedores felizes, já passa de 90%. Agora, vamos falar mais sobre essa flexibilidade que temos no **CSS**.O **Flexbox**, foi projetado como um modelo de layout **unidimensional** e método que pode oferecer distribuição de espaço entre itens numa interface e capacidade de alinhamento. Ele também pode ser usado para trabalhar elementos de forma **bidimensional**, mas o flexbox opera melhor quando trabalhado com os itens em apenas uma dimensão, ou seja, em coluna ou linha.Já o **CSS Grid**, tem o modelo **bidimensional**, que controla ao mesmo tempo as colunas e linhas. Você pode indicar o ponto em que um elemento começa e acaba dentro da sua grid, o que proporciona muita flexibilidade.**CSS Grid** é principalmente definido no elemento pai. No **flexbox**, fora o básico, a maior parte do layout é aplicado nos elementos filhos.O intuito do artigo, não é me aprofundar muito em cada assunto sobre como montar a sua grade, e sim, apenas apresentar os sistemas e ferramentas para o mesmo. O mais importante é deixar claro que um não substitui o outro. Podem ser usado tranquilamente juntos e em próximo artigos, darei mais exemplos dessa combinação.Abaixo podemos brincar, conhecer e praticar com **Flexbox** e **CSS Grid**.- [Flexbox Froggy](https://flexboxfroggy.com/) - [CSS Grid Garden](https://cssgridgarden.com/)## BibliotecasFiz um compilado das ferramentas que podem nos ajudar e inspirar no desenvolvimento e montagem da grade para os nossos projetos.### Pré-processadores e CSS#### Flexbox- **Flexbox Grid** - [http://flexboxgrid.com/](http://flexboxgrid.com/) - **Bootstrap Grid** - [https://getbootstrap.com/docs/4.0/layout/grid/](https://getbootstrap.com/docs/4.0/layout/grid/) - **Bulma** - [https://bulma.io/](https://bulma.io/) - **Waffle Grid** - [https://lucasgruwez.github.io/waffle-grid](https://lucasgruwez.github.io/waffle-grid) - **Basscss** - [https://basscss.com/](https://basscss.com/) - **Pure** - [https://purecss.io/grids/](https://purecss.io/grids/) - **Milligram** - [https://milligram.io/grids.html](https://milligram.io/grids.html) - **GRD** - [https://github.com/1000ch/grd](https://github.com/1000ch/grd) - **Gridlex** - [https://github.com/devlint/gridlex](https://github.com/devlint/gridlex) - **Gridly** - [https://github.com/IonicaBizau/gridly](https://github.com/IonicaBizau/gridly) - **Blueprint CSS** - [https://blueprintcss.dev/](https://blueprintcss.dev/) - **Structure** - [https://github.com/kenwheeler/structure](https://github.com/kenwheeler/structure) - **Picnic CSS** - [https://github.com/franciscop/picnic](https://github.com/franciscop/picnic)#### CSS Grid- **CSS grid 12 column layout** - [https://github.com/erikmonjas/css-grid-12-column-layout](https://github.com/erikmonjas/css-grid-12-column-layout) - **Griddy.css** - [https://github.com/balapa/griddy.css](https://github.com/balapa/griddy.css)#### Outros sistemas- **Semantic UI** - [https://semantic-ui.com/collections/grid.html](https://semantic-ui.com/collections/grid.html) - **csswizardry-grids** - [https://github.com/csswizardry/csswizardry-grids](https://github.com/csswizardry/csswizardry-grids) - **Jeet Grid** - [https://github.com/mojotech/jeet](https://github.com/mojotech/jeet) - **Lost Grid** - [https://github.com/peterramsing/lost](https://github.com/peterramsing/lost) - **Toast** - [https://github.com/daneden/Toast](https://github.com/daneden/Toast) - **Neat** - [https://github.com/thoughtbot/neat](https://github.com/thoughtbot/neat) - **Msdotcom/WinJS Grid Framework** - [https://github.com/winjs/grid/](https://github.com/winjs/grid/) - **Skeleton** - [https://github.com/dhg/Skeleton](https://github.com/dhg/Skeleton) - **Crow** - [https://github.com/kkortes/crow](https://github.com/kkortes/crow) - **Simple Grid** - [https://github.com/zachacole/Simple-Grid](https://github.com/zachacole/Simple-Grid) - **Pills** - [http://arkpod.in/pills/](http://arkpod.in/pills/) - **Spacegrid** - [https://github.com/JonathanSpeek/spacegrid](https://github.com/JonathanSpeek/spacegrid)### Angular, React e Vue- **Angular UI Grid** - [http://ui-grid.info/](http://ui-grid.info/) - **React Material-UI Grid** - [https://material-ui.com/components/grid/](https://material-ui.com/components/grid/) - **React Grid Layout** - [https://github.com/STRML/react-grid-layout](https://github.com/STRML/react-grid-layout) - **Rebass Grid** - [https://rebassjs.org/grid/](https://rebassjs.org/grid/)### JavaScript- **Muuri** - [https://github.com/haltu/muuri](https://github.com/haltu/muuri) - **Masonry** - [https://github.com/desandro/masonry](https://github.com/desandro/masonry)### Design/UX/UI- **KK UI Store's - Grid System Library** - [https://grid.kkuistore.com/](https://grid.kkuistore.com/)### BônusComo bônus, deixo uma biblioteca que posibilita a utilização de 3 sistemas de grid (flexbox, CSS Grid e Flexbox Masonry Grid. Escrito em SCSS e disponível em SCSS e CSS.- [CSS Grid Library](https://github.com/CodyReeves/css-grid-system-library)## Considerações finaisMontar uma grade no projeto sempre gerou dúvidas entre leigos, designers e desenvolvedores front-end. Citei o **960 GS**, por ser um exemplo de que esse assunto precisou de um **norte** para quem não tinha muita experiência ou estipular um padrão.A única coisa certa, é que temos uma evolução e maior suporte em relação ao assunto de **layout CSS** na última década. Vale o estudo na parte de elaboração do projeto, quanto ao melhor sistema que deixará o desenvolvimento do mesmo mais flexivel e de acordo com a área de interface e desenvolvimento.Na minha opinião, antes de qualquer coisa relacionada ao desenvolvimento web, é necessário definir quais são os navegadores que o seu projeto dará suporte. Assim, diminuindo as preocupações na fase de desenvolvimento e é claro, quando o produto estiver em produção.
Karma é uma ferramenta que gera um servidor Web que executa o código de teste para cada um dos navegadores conectados. O quão é necessário se criar testes para um desenvolvedor? Muito necessário. O KarmaJS está aqui para simplificar isso.> Things should be simple. We believe in testing and so we want to make it as simple as possible. > > The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative. > -- KarmaJS > > - [KarmaJS](http://karma-runner.github.io) > ## InstalaçãoPrecisamos primeiramente ter o NodeJS e NPM, instalados.Podendo ser baixado, aqui: [NodeJS com NPM](https://nodejs.org/en/download/)Agora que já temos o NodeJS e NPM, instalados. Temos que instalar o `KarmaJS` via terminal:``` npm install -g karma-cli ```Para instalar o `KarmaJS` e os plugins no projeto. Basta ter o `package.json` e executar os comandos:``` npm install karma --save-dev ```Para ter o karma como dependência de desenvolvimento.``` npm install karma-jasmine karma-chrome-launcher --save-dev ```Como exemplo, acima estaremos instalando os plugins para o `jasmine` e o lançador do `chrome`.## ConfiguraçãoAgora que temos o `KarmaJS` e os plugins instalados, precisamos ir para a parte de configuração.Para gerar o arquivo de configuração do `Karma`, precisamos do comando:``` karma init ```Ao executar o comando, aparecerá as perguntas para ser montado o arquivo de configuração.``` Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmineDo you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question. > noDo you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next question. > ChromeWhat is the location of your source and test files ? You can use glob patterns, eg. 'js/*.js' or 'test/**/*Spec.js'. Enter empty string to move to the next question. >Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. '**/*.swp'. Enter empty string to move to the next question. >Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options. > yesConfig file generated at '[diretorio]/karma.conf.js'.```Após responder as perguntas, será gerado o arquivo `karma.conf.js`. Para esse exemplo, as sugestões me atendem, então foi só apertar `enter`, direto.O nosso arquivo de configuração está de acordo com os plugins que foram instalados inicialmente. Para os testes, usaremos o `jasmine` e os mesmos rodarão no navegador 'chrome', na porta 9876 (http://localhost:9876).## ExecuçãoPara executar o que foi configurado, precisamos do comando:``` karma start ```Mesmo não tendo nenhum arquivo para ser testado, executando o comando, já poderá ver em ação o que foi configurado.Para um exemplo mais prático, vamos criar o arquivo `test.js`, com o código:``` describe('Exemplo', function() { it('verdadero', function() { expect(true).toBe(true); }); it('falso', function() { expect(false).not.toBe(true); }); }); ```No arquivo `karma.conf.js`, vamos acrescentar o caminho do arquivo, para ser identificado.``` files: [ './*.js' ], ```Pronto, como um código simples de um teste feito com o `jasmine`, agora é só executar o `karma start`.No terminal, aparecerá a seguinte mensagem:``` Chrome 47.0.2526 (Windows 7 0.0.0): Executed 2 of 2 SUCCESS (0.018 secs / 0.003 secs) ```E assim, temos o primeiro teste rodando de acordo com a nossa configuração, de uma forma bem rápida e simples.## ConclusãoNão se pode ter desculpas para não criar testes para o seu código. Além de assegurar a integridade, previne muitas dores de cabeça e falhas que não podem fazer parte do dia a dia de um bom desenvolvedor. Todo ser humano é falho, então vamos deixar nas mãos da tecnologia a última avaliação do seu código. O bom desenvolvedor é ciente de que pode haver `bugs` e que testes, além de ajudar, evita transtornos para o cliente. Afinal, ninguém quer perder dinheiro. Ainda mais se poderia ser evitado.
O Ionic é um framework para construir aplicações no sentido nativo para dispositivos móveis, utilizando as linguagens web como HTML, CSS e JavaScript.Criado no final de 2013, visando a construção de aplicações híbridas. Sendo voltado para a aparência e interação da interface da aplicação com o mesmo. Em sua documentação deixa bem claro que não é um substituto para o PhoneGap ou seu preferido framework de JavaScript. A ideia é se encaixar com os seus projetos e simplicar grande parte da sua aplicação no lado do front-end.O framework exige atualmente o AngularJS, para trabalhar todo o seu potencial. Se integra com os recursos nativos dos dispositivos por meio do Cordova e disponibiliza ferramentas e componentes com o Ionic Module e Ionic CLI.## InstalaçãoPara começar, precisamos primeiramente ter o NodeJS e NPM, instalados.Podendo ser baixado, aqui: [NodeJS com NPM](https://nodejs.org/en/download/)E agora, será necessário instalar globalmente o ionic e o cordova:``` npm install -g ionic cordova ```## Criando um projetoUsando o gerador do Ionic CLI, utilizaremos o comando:``` ionic start nomeDoApp tipo ```Onde:`nomeDoApp` = Nome da sua aplicação. `tipo` = Tipo do projeto base(Existem 3 tipos: tabs, blank e sidemenu.).## Visualizando o projetoCom o projeto criado, podemos rodar o projeto para visualizá-lo com o comando:``` ionic serve ```Para simular um dispositivo móvel com android por exemplo, podemos utilizar os comandos abaixo:``` ionic platform add os ionic build os ionic emulate os ```Onde:`os` = plataforma(android ou ios)Até o momento apenas simulei com o android e você precisa ter instalado o [Java Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) e o [Android SDK](http://developer.android.com/sdk/installing/index.html)## Links interessantes[Ionic Creator](https://creator.ionic.io/app/login) Aqui você pode criar a interface para as páginas com os elementos disponíveis[Ionic Playground](http://play.ionic.io/app/312561eb0aaf) Funciona como o `jsfiddle`, voltado para o Ionic[Ionic Material Design](http://ionicmaterial.com/) Para resolver uma boa parte de problemas com layout## ObservaçõesPrecisando utilizar os recursos nativos dos dispositivos, todos os recursos do Cordova estarão disponíveis para isso. E também pode contar com o módulo `ngCordova` do AngularJS.O Ionic usa o GulpJS para automatizar as tarefas de compilar o SCSS, coffeeScript e rodar o servidor para visualizar o projeto. Os mesmos são opcionais.## ConclusãoNos dias de hoje, ter uma aplicação web e ainda desenvolver nativamente para android e IOS, além de gastar mais recursos, tempo e mais códigos para manter, é complicado. Por isso, ter uma aplicação hídrida com o Ionic, resolve boa parte dos problemas, com mais rapidez e facilidade para o desenvolvimento da sua aplicação.Confira o [site](http://ionicframework.com/) do framework e sua documentação para mais detalhes.
No desenvolvimento Front-End tem algumas tarefas que são como um castigo se feitas manualmente. Por isso, temos que automatizar algumas tarefas. Para nos auxiliar com isso, temos o GruntJS.O GruntJS é um `task runner` que automatiza tarefas e roda via terminal.## InstalaçãoPara rodá-lo, precisamos primeiramente ter o NodeJS e NPM, instalados.Podendo ser baixado, aqui: [NodeJS com NPM](https://nodejs.org/en/download/)Agora que já temos o NodeJS e NPM, instalados. Temos que instalar o GruntJS via terminal:``` npm install -g grunt-cli ```Podemos ver se está instalado com o commando:``` grunt --version ```Para o GruntJS funcionar, precisamos de 2 arquivos: `package.json` e o `Gruntfile.js`.O **_package.json_** é um arquivo do NodeJS, onde terão as informações do projeto e os plugins do GruntJS. Ex:``` { 'name': 'project name', 'version': '1.0.0', 'title': 'Project Title', 'devDependencies': { 'grunt': '>=0.4.5', 'load-grunt-config': '^0.10.0', 'load-grunt-tasks': '^0.4.0' }, } ```O **_Gruntfile.js_** é o arquivo de configuração do GruntJS. Ex:``` module.exports = function( grunt ) { grunt.initConfig({ // Tasks }); }; ```Para adicionar um plugin no seu `package.json`, podemos utilizar os comandos:Para as dependências para produção (`dependencies`)``` npm install grunt --save ```Para dependências, apenas para o desenvolvimento (`devDependencies`)``` npm install grunt --save-dev ```Se você está utilizando um `package.json`, já com os plugins listados, basta executar o comando:``` npm install ```## ConfiguraçãoAgora com os plugins instalados, precisando configurar cada tarefa para ser executado ao rodar o `GruntJS`.No link [http://gruntjs.com/plugins](http://gruntjs.com/plugins), você pode conferir os plugins para o `GruntJS`. Clicando no plugin desejado, será encaminhado para o host [https://www.npmjs.com](https://www.npmjs.com), onde terá as informações para a configuração do `package` escolhido.Como exemplo, escolhi o plugin `grunt-contrib-uglify`, sendo levado para [https://www.npmjs.com/package/grunt-contrib-uglify](https://www.npmjs.com/package/grunt-contrib-uglify). Onde podemos conferir, como configurar a tarefa.Abaixo, como podemos ver no método `initConfig`, iremos passar um objeto com a configuração do plugin. Com o método `loadNpmTasks`, informaremos a tarefa que deverá ser carregada. E para finalizar, devemos registrar as tarefas que teremos no projeto.``` module.exports = function( grunt ) { grunt.initConfig({ uglify: { my_target: { files: { 'dest/output.min.js': ['src/input1.js', 'src/input2.js'] } } } }); // Plugins do Grunt grunt.loadNpmTasks( 'grunt-contrib-uglify' ); // Tarefas que serão executadas grunt.registerTask( 'default', [ 'uglify' ] );};```Para ficar mais claro, temos outro exemplo com mais plugins e tarefas.``` module.exports = function( grunt ) { grunt.initConfig({ uglify: { my_target: { files: { 'dest/output.min.js': ['src/input1.js', 'src/input2.js'] } } }, cssmin: { target: { files: [{ expand: true, cwd: 'release/css', src: ['*.css', '!*.min.css'], dest: 'release/css', ext: '.min.css' }] } } }); // Plugins do Grunt grunt.loadNpmTasks( 'grunt-contrib-uglify' ); grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); // Tarefas que serão executadas grunt.registerTask( 'default', [ 'cssmin', 'uglify' ] ); grunt.registerTask( 'css', [ 'cssmin' ] ); grunt.registerTask( 'js', [ 'uglify' ] );};```Acima, temos a configuração dos plugins `cssmin` e `uglify` no `Gruntfile.js`, onde os mesmos serão carregados com o método `loadNpmTasks` e registramos 3 tarefas.## Executando as tarefasNo terminal, rodando o comando:``` grunt ```Será executada a lista de tarefas `default` (`cssmin` e `uglify`)Com o comando:``` grunt css ```Será executada a lista `css`E o comando:``` grunt js ```a lista `js`Acredito que ficou simples de compreender a lógica para utilizar as tarefas do `GruntJS`. Com isso, temos tudo instalado e configurado. Agora só ser feliz com as tarefas automatizadas.## A dicaDependendo da quantidade de configurações no seu `Gruntfile.js`, a manutenção fica bem complicada. Para resolver o problema, podemos utilizar o plugin `load-grunt-config`, para termos mais organização.[https://github.com/firstandthird/load-grunt-config](https://github.com/firstandthird/load-grunt-config) O **_load-grunt-config_**, permite quebrar a configuração do `Gruntfile.js` por tarefa. Você pode usar os arquivos na extensão .js , .json , .yaml , .cson , ou .coffee.Instalando o plugin``` npm install load-grunt-config --save-dev ```O `Gruntfile.js`, ficará semelhante ao exemplo abaixo:``` module.exports = function(grunt) { // Carrega configurações da pasta grunt-configs/ var path = require('path'); require('load-grunt-config')(grunt, { init: true, configPath: path.join(process.cwd(), 'source/_tasks'), data: { projectDir : '../../public/assets/', projectDev : 'source/_assets/', pkg: grunt.file.readJSON('package.json') } });}; ````'source/_tasks'` - Será o caminho para onde estão os arquivos com as configurações das tarefas.No objeto data, informamos as variáveis que será retornadas pelo parâmetro `options` no arquivo de configuração de cada plugin, como podemos ver abaixo.``` module.exports = function(grunt, options){ // configuração }; ```No `Gruntfile.js`, o caminho das configurações se encontram na pasta `source/_tasks` e a estrutura ficaria assim:``` >source >_tasks > aliases.yaml > cssmin.js ```A sua pasta com as tarefas precisará ter o arquivo `aliases.(js|.json|yaml|cson|coffee)` para definir as suas tarefas.Exemplo com a extensão `.yaml`:**_aliases.yaml_**``` default: - 'cssmin' - 'uglify'css: - 'cssmin'js: - 'uglify'```Abaixo, um exemplo com a extensão `.js`, da configuração de um plugin.**_cssmin.js_**``` module.exports = function(grunt, options){ var projectDir = options.projectDir; return { site: { files: [{ expand: true, cwd: 'css/site/', src: ['*.css'], dest: 'css/site/' }] } }; }; ```E assim, podemos utilizar o `GruntJS`, para estar automatizando as tarefas que dão um bom trabalho se feitas manualmente e poupam um bom tempo, nos deixando mais produtivos.
O HTML é uma linguagem de marcação. Assim, dando significado para o conteúdo, mediante as suas `tags`. A WAI-ARIA se aplica para o significado das interações. Assim, ajudando onde a informação é dividida em diversos elementos e precisão de uma interação no site para serem visualizadas.> WAI - ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. > > > - [WAI-ARIA - Front in Rio 2012](http://www.w3c.br/pub/Agenda/PalestraFrontinRio2012AcessibilidadeHtml5Waiaria/Apresentacao-wai-aria-html5-frontinrio2012.pdf) > ## RolesDistingue o tipo de elemento que está tendo a interação do usuário. Temos 4 categorias de `roles`: Abstract, Widgets, Document Structure e Landmarks.**_Abstract_** - Tem a finalidade de definir conceitos gerais. São utilizados apenas por navegadores para ajudar a organizar e dinamizar um documento, e nunca por desenvolvedores para marcar HTML. Eles não são mapeados para leitores de tela e não fornecem nenhuma informação adicional acessibilidade diretamente entre HTML e leitor de tela.- [command](http://www.w3.org/TR/wai-aria/roles#command) - [composite](http://www.w3.org/TR/wai-aria/roles#composite) - [input](http://www.w3.org/TR/wai-aria/roles#input) - [landmark](http://www.w3.org/TR/wai-aria/roles#landmark) - [range](http://www.w3.org/TR/wai-aria/roles#range) - [roletype](http://www.w3.org/TR/wai-aria/roles#roletype) - [section](http://www.w3.org/TR/wai-aria/roles#section) - [sectionhead](http://www.w3.org/TR/wai-aria/roles#sectionhead) - [select](http://www.w3.org/TR/wai-aria/roles#select) - [structure](http://www.w3.org/TR/wai-aria/roles#structure) - [widget](http://www.w3.org/TR/wai-aria/roles#widget) - [window](http://www.w3.org/TR/wai-aria/roles#window)**_Widgets_** - Tem a finalidade de definir elementos de interface independentes ou em conjuntos.- [alert](http://www.w3.org/TR/wai-aria/roles#alert) - [alertdialog](http://www.w3.org/TR/wai-aria/roles#alertdialog) - [button](http://www.w3.org/TR/wai-aria/roles#button) - [checkbox](http://www.w3.org/TR/wai-aria/roles#checkbox) - [dialog](http://www.w3.org/TR/wai-aria/roles#dialog) - [gridcell](http://www.w3.org/TR/wai-aria/roles#gridcell) - [link](http://www.w3.org/TR/wai-aria/roles#link) - [log](http://www.w3.org/TR/wai-aria/roles#log) - [marquee](http://www.w3.org/TR/wai-aria/roles#marquee) - [menuitem](http://www.w3.org/TR/wai-aria/roles#menuitem) - [menuitemcheckbox](http://www.w3.org/TR/wai-aria/roles#menuitemcheckbox) - [menuitemradio](http://www.w3.org/TR/wai-aria/roles#menuitemradio) - [option](http://www.w3.org/TR/wai-aria/roles#option) - [progressbar](http://www.w3.org/TR/wai-aria/roles#progressbar) - [radio](http://www.w3.org/TR/wai-aria/roles#radio) - [scrollbar](http://www.w3.org/TR/wai-aria/roles#scrollbar) - [slider](http://www.w3.org/TR/wai-aria/roles#slider) - [spinbutton](http://www.w3.org/TR/wai-aria/roles#spinbutton) - [status](http://www.w3.org/TR/wai-aria/roles#status) - [tab](http://www.w3.org/TR/wai-aria/roles#status) - [tabpanel](http://www.w3.org/TR/wai-aria/roles#tabpanel) - [textbox](http://www.w3.org/TR/wai-aria/roles#textbox) - [timer](http://www.w3.org/TR/wai-aria/roles#timer) - [tooltip](http://www.w3.org/TR/wai-aria/roles#tooltip) - [treeitem](http://www.w3.org/TR/wai-aria/roles#treeitem)Exemplo:``` Texto de exemplo ```As `roles` abaixo, normalmente são recipientes para gerenciar outros elementos de interface.- [combobox](http://www.w3.org/TR/wai-aria/roles#combobox) - [grid](http://www.w3.org/TR/wai-aria/roles#grid) - [listbox](http://www.w3.org/TR/wai-aria/roles#listbox) - [menu](http://www.w3.org/TR/wai-aria/roles#menu) - [menubar](http://www.w3.org/TR/wai-aria/roles#menubar) - [radiogroup](http://www.w3.org/TR/wai-aria/roles#radiogroup) - [tablist](http://www.w3.org/TR/wai-aria/roles#tablist) - [tree](http://www.w3.org/TR/wai-aria/roles#tree) - [treegrid](http://www.w3.org/TR/wai-aria/roles#treegrid)Exemplo:``` Sans-serif Serif Monospace Fantasy```**_Document Structure_** - Descrevem estruturas que organizam o conteúdo de uma página. Geralmente não são interativos.- [article](http://www.w3.org/TR/wai-aria/roles#article) - [columnheader](http://www.w3.org/TR/wai-aria/roles#columnheader) - [definition](http://www.w3.org/TR/wai-aria/roles#definition) - [directory](http://www.w3.org/TR/wai-aria/roles#directory) - [document](http://www.w3.org/TR/wai-aria/roles#document) - [group](http://www.w3.org/TR/wai-aria/roles#group) - [heading](http://www.w3.org/TR/wai-aria/roles#heading) - [img](http://www.w3.org/TR/wai-aria/roles#img) - [list](http://www.w3.org/TR/wai-aria/roles#list) - [listitem](http://www.w3.org/TR/wai-aria/roles#listitem) - [math](http://www.w3.org/TR/wai-aria/roles#math) - [note](http://www.w3.org/TR/wai-aria/roles#presentation) - [presentation](http://www.w3.org/TR/wai-aria/roles#presentation) - [region](http://www.w3.org/TR/wai-aria/roles#region) - [row](http://www.w3.org/TR/wai-aria/roles#row) - [rowgroup](http://www.w3.org/TR/wai-aria/roles#rowgroup) - [rowheader](http://www.w3.org/TR/wai-aria/roles#rowheader) - [separator](http://www.w3.org/TR/wai-aria/roles#separator) - [toolbar](http://www.w3.org/TR/wai-aria/roles#toolbar)Exemplo:``` Essa informação é desnecessária Eu entendi```**_Landmarks_** - São regiões da página que são pontos importantes para a navegação do usuário.- [application](http://www.w3.org/TR/wai-aria/roles#application) - [banner](http://www.w3.org/TR/wai-aria/roles#banner) - [complementary](http://www.w3.org/TR/wai-aria/roles#complementary) - [contentinfo](http://www.w3.org/TR/wai-aria/roles#contentinfo) - [form](http://www.w3.org/TR/wai-aria/roles#form) - [main](http://www.w3.org/TR/wai-aria/roles#main) - [navigation](http://www.w3.org/TR/wai-aria/roles#navigation) - [search](http://www.w3.org/TR/wai-aria/roles#search)Exemplo:``` Sobre Contato```## States e PropertiesAprensenta o estado do elemento.Abaixo, temos um exemplo de estado e propriedades com a funcionalidade de `tabs`, que será alterado via javaScript (Não será necessário, colocar o script aqui, porque a ideia é apenas mostrar as propriedades e estados):``` // HTML Section 1 Section 2 Section 3... ... ...```Ao clicar no item de navegação, o elemento terá o estado `true`, para a propriedade `aria-selected`. E o conteúdo que será mostrado para o usuário, não terá a propriedade `aria-hidden` com o estado `true`.## Links- HTML5 ARIA - [http://www.w3.org/TR/aria-in-html/](http://www.w3.org/TR/aria-in-html/) - ARIA - [http://www.w3.org/WAI/PF/aria/](http://www.w3.org/WAI/PF/aria/) - Roles - [http://www.w3.org/TR/wai-aria/roles](http://www.w3.org/TR/wai-aria/roles) - States and Properties - [http://www.w3.org/TR/wai-aria/states_and_properties](http://www.w3.org/TR/wai-aria/states_and_properties) - Design Patterns - [http://www.w3.org/TR/wai-aria-practices/#aria_ex](http://www.w3.org/TR/wai-aria-practices/#aria_ex)## ConclusãoA WAI-ARIA é para extender e não substituir as tags HTML. Dê sempre preferência para o HTML, para dar significado ao conteúdo. E é preciso tomar alguns cuidados.Se não é possível usar a tag `form`, usaríamos assim:``````No código abaixo, seria redundante.``````O mais importante é sempre lembrar que as interações devem ser usadas via teclado. Afinal, o foco está na acessibilidade.
Antes de qualquer coisa, cada um/equipe sabe o que é melhor para o workflow do seu projeto. Cada projeto tem suas necessidades e o ideal que seja feito um planejamento para o mesmo. O que interessa é a organização, automação das tarefas, gerenciamento de dependências e padrão único da equipe.Para iniciar o fluxo de trabalho, temos que criar um controle de versão. Afinal, não podemos perder o que fizermos no projeto.A partir desse momento vem o processo de desenvolvimento de código, com uma arquitetura sólida e preferencialmente com [TDD](http://pt.wikipedia.org/wiki/Test_Driven_Development) ou [BDD](http://pt.wikipedia.org/wiki/Behavior_Driven_Development).O importante é a criação de padrões e documentação. Para que o projeto fique de fácil compreensão na hora da manutenção. Os testes unitários, automatização de tarefas e ferramentas que auxiliam na depuração são de grande valia para assegurar que o seu código seja estável.Como não queria que o artigo ficasse muito extenso, nos próximos artigos vou falar mais detalhadamente sobre cada etapa e ferramenta. Por enquanto, listei por categorias o que uso no fluxo de trabalho como front-ender, com pequenos comentários.---## LinguagemAs linguagens que nós front-enders mais usamos, são:- **HTML** - [http://pt.wikipedia.org/wiki/HTML](http://pt.wikipedia.org/wiki/HTML) - **CSS** - [http://pt.wikipedia.org/wiki/Cascading_Style_Sheets](http://pt.wikipedia.org/wiki/Cascading_Style_Sheets) - **JavaScript** - [http://pt.wikipedia.org/wiki/JavaScript](http://pt.wikipedia.org/wiki/JavaScript)---## Diversos e ProdutividadeComo editor utilizei por um bom tempo o Sublime e o Bracket, no momento utilizando o Atom. Ter um bom editor que auxilia com seus plugins, facilita e agiliza muito o processo de desenvolvimento.- **Sublime Text** - [http://www.sublimetext.com/3](http://www.sublimetext.com/3) - **Bracket** - [http://brackets.io/](http://brackets.io/) - **Atom** - [https://atom.io/](https://atom.io/)Para gerenciar as tarefas:- **Wunderlist** - [https://www.wunderlist.com/pt/](https://www.wunderlist.com/pt/)Poderia colocar tudo no mesmo lugar, mas tenho a preferência de versionar os arquivos gráficos como os layouts em PSD no Dropbox, documentos e livros no Google Drive.- **Dropbox** - [https://www.dropbox.com/](https://www.dropbox.com/)- **Google Drive** - [https://www.google.com/intl/pt-BR/drive/](https://www.google.com/intl/pt-BR/drive/)---## SoftwaresGosto de usar o Rails Installer, pois em uma só tacada ele já instala o Ruby, Rails, Git bash e etc..- **Rails Installer** - [http://railsinstaller.org/pt-BR](http://railsinstaller.org/pt-BR)Para criar, visualizar e editar os layouts web.- **Photoshop** - [http://www.adobe.com/br/products/photoshop.html](http://www.adobe.com/br/products/photoshop.html)---## ReferênciasÓtimas referências para consultar a compatibilidade crossbrowser e novos recursos.- **MDN** - [https://developer.mozilla.org/pt-BR/](https://developer.mozilla.org/pt-BR/)- **caniuse** - [http://caniuse.com/](http://caniuse.com/)- **html5please** - [http://html5please.com/](http://html5please.com/)- **Cross Browser Knowledgebase** - [http://www.crossbrowserbook.com/Knowledge](http://www.crossbrowserbook.com/Knowledge)---## Ferramentas OnlinePara fazer testes rápidos com bibliotecas JavaScript, HTML e CSS- **jsfiddle** - [http://jsfiddle.net/](http://jsfiddle.net/)Nem sempre conseguimos ter todos os ícones que precisamos em um lugar só, o Icomoon ajuda nisso e com ícones que você mesmo criou.- **icomoon** - [https://icomoon.io/](https://icomoon.io/)Para testar a performance do site:- **PageSpeed** - [https://developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/)- **GTmetrix** - [http://gtmetrix.com/](http://gtmetrix.com/)Avaliar a performance do seu código JavaScript.- **JSperf** - [http://jsperf.com/](http://jsperf.com/)Depois de estruturar seu código HTML com o Schema, aqui você pode ver como o Google vê.- **Google Structured Data Testing Tool** - [http://www.google.com.br/webmasters/tools/richsnippets](http://www.google.com.br/webmasters/tools/richsnippets)---## PlataformaAlém de ser um pré-requisito para utilizar muitas ferramentas que estão listadas nesse artigo, o Node consegue levar o front-ender para o lado do servidor. Não vou falar muito porque isso merece um artigo à parte. ^^- **NodeJS** - [http://nodejs.org](http://nodejs.org)---## Geradores & GerenciadoresPara conectar a criação de estrutura, automatização e gerenciamento de tarefas, temos:- **Yeoman** - [http://yeoman.io/](http://yeoman.io/)Gerenciador de Pacotes do Node- **NPM** - [https://www.npmjs.com/](https://www.npmjs.com/)Gerenciador de dependências- **Bower** - [http://bower.io/](http://bower.io/)Para gerar páginas estáticas. Uso para este blog. :)- **Jekyll** - [http://jekyllrb.com/](http://jekyllrb.com/)---## Automatização de tarefasSempre utilizei o Grunt, mas já testando o Gulp. ^^- **Grunt** - [http://gruntjs.com/](http://gruntjs.com/)- **Gulp** - [http://gulpjs.com/](http://gulpjs.com/)---## Pré-processador de CSSSou grande adepto do SCSS, e utilizo bastante o Compass.- **SASS** - [http://sass-lang.com/](http://sass-lang.com/)- **Compass** - [http://compass-style.org/](http://compass-style.org/)- **LESS** - [http://lesscss.org/](http://lesscss.org/)- **Stylus** - [http://learnboost.github.io/stylus/](http://learnboost.github.io/stylus/)---## VersionamentoPara versionar os meus projetos utilizo o Git, dividindo entre o [Github](https://github.com/) e o [Bitbucket](https://bitbucket.org/)- **Git** - [http://git-scm.com/book/pt-br/v1](http://git-scm.com/book/pt-br/v1)---## Depuração & testeMuito útil para garantir a qualidade e padrão do código.- **JSHint** - [http://jshint.com/](http://jshint.com/)- **CSSLint** - [http://csslint.net/](http://csslint.net/)Teste unitário para o seu código JavaScript, é indispensável.- **Jasmine** - [http://jasmine.github.io/](http://jasmine.github.io/)- **Mocha** - [http://mochajs.org/](http://mochajs.org/)- **Karma** - [http://karma-runner.github.io/0.12/index.html](http://karma-runner.github.io/0.12/index.html)Para visualização rápida em várias resoluções- **Responsive Design Testing** - [http://mattkersley.com/responsive/](http://mattkersley.com/responsive/)---## NavegadorPor questão de memória RAM, largando o Chrome como meu navegador principal para voltar para o Firefox.- **Chrome** - [https://www.google.com.br/chrome/](https://www.google.com.br/chrome/)- **Firefox** - [https://www.mozilla.org/pt-BR/firefox/new/](https://www.mozilla.org/pt-BR/firefox/new/)---## Complementos do navegador- **ColorZilla** - [http://www.colorzilla.com/](http://www.colorzilla.com/)- **Firebug** - [http://getfirebug.com/](http://getfirebug.com/)- **Window Resizer** - [Chrome](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) & [Firefox](https://addons.mozilla.org/pt-BR/firefox/addon/window-resizer-webextension/?src=search)- **Chrome Developer Tools** - [https://developer.chrome.com/devtools](https://developer.chrome.com/devtools)---## Bibliotecas & FrameworksO mais famoso e mais utilizado com certeza é o JQuery. Também utilizo no momento, mas já tive um bom contato com o Dojo e foi um preríodo de um bom conhecimento.- **jQuery** - [http://jquery.com/](http://jquery.com/)- **Dojo Toolkit** - [http://dojotoolkit.org/](http://dojotoolkit.org/)Avaliando os prós e contras desses 2 frameworks que tem muito a acrescentar.- **AngularJS** - [https://angularjs.org/](https://angularjs.org/)- **React** - [http://facebook.github.io/react/](http://facebook.github.io/react/)---## Sintaxe & metodologiasCom uma junção de padrões e metodologias, você cria um boa estrutura para o seu projeto.- **BEM** - [https://en.bem.info/methodology/](https://en.bem.info/methodology/)- **OOCSS** - [http://oocss.org/](http://oocss.org/)- **SMACSS** - [https://smacss.com/](https://smacss.com/)- **DryCSS** - [http://malko.github.io/dryCss/](http://malko.github.io/dryCss/)- **Atomic Design** - [http://bradfrost.com/blog/post/atomic-web-design/](http://bradfrost.com/blog/post/atomic-web-design/)- **CSS Guidelines** - [http://cssguidelin.es/](http://cssguidelin.es/)- **Idiomatic CSS** - [https://github.com/necolas/idiomatic-css](https://github.com/necolas/idiomatic-css)- **Idiomatic SASS** - [https://github.com/anthonyshort/idiomatic-sass](https://github.com/anthonyshort/idiomatic-sass)- **Idiomatic JS** - [https://github.com/rwaldron/idiomatic.js](https://github.com/rwaldron/idiomatic.js)- **JavaScript design patterns** - [https://github.com/addyosmani/essential-js-design-patterns](https://github.com/addyosmani/essential-js-design-patterns)---## DocumentaçãoPara a documentação do código SCSS e JS. Para as demais documentações, utilizo o Jekyll.- **SassDoc** - [http://sassdoc.com/](http://sassdoc.com/)- **JSDuck** - [https://github.com/senchalabs/jsduck](https://github.com/senchalabs/jsduck)---## Inspiração & BlogsÉ sempre bom ter uma inspiração e segue algumas.- **CSS Tricks** - [http://css-tricks.com/](http://css-tricks.com/)- **Smashing Magazine** - [http://www.smashingmagazine.com/](http://www.smashingmagazine.com/)- **A List Apart** - [http://alistapart.com/](http://alistapart.com/)- **Codrops** - [http://tympanus.net/codrops/](http://tympanus.net/codrops/)- **Awwwards** - [http://www.awwwards.com/](http://www.awwwards.com/)Por enquanto é isso. :)
Hoje venho falar sobre o que o desenvolvedor front-end faz. Existem dois tipos de linguagens para o desenvolvimento web: As linguagens client-side(lado cliente) e server-side(lado servidor). Com isso, no desenvolvimento temos três estágios (Front-End, Middleware e Back-End).**O Front-End está no lado cliente(client-side), no caso seria o primeiro estágio quando acessamos um site. Normalmente a estrutura front-end é composta por HTML, CSS e Javascript.**O Middleware(mediador) seria o intermediário entre a interface(front) e os dados(back). Geralmente é associado a um 'encanamento' de um sistema. Um exemplo seria a comunicação de aplicações via web service.O Back-End está no lado servidor(server-side), que é responsável por todo processamento dos dados recebidos do front-end e esse estágio mexe com o banco de dados(ex: MySQL, MS-SQL, PostgreSQL e etc...) e o armazenamento de dados. Posso citar algumas linguagens do lado servidor como Ruby on Rails, Lua, Perl, Python, Django, Node, PHP e etc...O intuito é apenas abordar superficialmente os dois últimos estágios citados e focar no primeiro estágio que seria o Front-End.> Front-end e back-end são termos utilizados para caracterizar interfaces de programas e serviços em relação ao usuário inicial desses recursos. (O 'usuário' pode ser um ser humano ou um programa.) A aplicação 'front-end' é aquele que os usuários do aplicativo interagem diretamente. Um aplicativo de 'back-end' ou programa serve indiretamente em apoio aos serviços de front-end, geralmente por estar mais perto do recurso necessário ou que tenham a capacidade de se comunicar com o recurso necessário. > -- Front-end > > - [Margaret Rouse](http://whatis.techtarget.com/definition/front-end) > Abaixo você tem uma estrutura (HTML), um estilo para o link (CSS) e uma interação (Javascript). Essa é apenas uma pequena amostra do que um front-ender faz.Exemplo HTML:``` Link```Exemplo CSS:``` #link { color: #4299E3; font-size: 14px; } ```Exemplo JavaScript:``` var el = document.getElementById('link');function message( event ) { event.preventDefault(); alert('Este é um link'); } el.addEventListener('click', message, false); ```O código acima, funcionando: [Demonstração](http://jsfiddle.net/hc77v7g2/)> ### O que o front-end faz:> 1. Estabelecer uma linguagem visual entre designers e o back-end > 2. A partir de um projeto visual, definir um conjunto de componentes que representam o conteúdo, marca, recursos, etc. > 3. Estabelecer uma linha de base para a aplicação Web em termos de convenções, quadros, requisitos, linguagens visuais e especificações. > 4. Definir o escopo do aplicativo Web em termos de dispositivos, navegadores, telas, animações. > 5. Desenvolver uma diretriz de garantia de qualidade para garantir a fidelidade da marca, a qualidade do código, revisão de produto pelas partes interessadas. > 6. Estilo de aplicações Web com espaçamentos adequados, tipografia, títulos, fontes cara, ícones, margens, preenchimentos, grades e assim por diante. > 7. Estilo de aplicações Web com várias imagens de alta resolução, mockups orientada dispositivo, tudo ao mesmo tempo cuidando de diretrizes de design. > 8. Marcação da aplicação web, tendo em conta a semântica, acessibilidade, SEO, esquemas e microformats. > 9. Conectar-se a uma API para recuperar informações em um amistoso, consumindo não-bateria, dispositivo e cliente maneira consciente. > 10. Desenvolver código do lado do cliente para executar animações, transições, carregamento lento, interações, fluxos de trabalho de aplicativos, a maior parte do tempo, tendo em conta a optimização progressiva e normas para trás compatíveis. > 11. Certificar que as conexões de back-end são seguras. > 12. Nunca esquecendo que apesar de prazos rigorosos, os pedidos dos associados e as limitações do dispositivo, o usuário é, e estará sempre em primeiro lugar. > > -- Why can’t we find Front End developers? > > - [Jose Aguinaga](http://jjperezaguinaga.com/2014/03/19/why-cant-we-find-front-end-developers/) > Em um projeto web, temos a regra de negócio:> 'Regras de Negócio são declarações sobre a forma da empresa fazer negócio. Elas refletem políticas do negócio. As organizações com isto têm políticas para satisfazer os objetivos do negócio, satisfazer clientes, fazer bom uso dos recursos, e obedecer às leis ou convenções gerais do negócio. > Regras do Negócio tornam-se requisitos, ou seja, podem ser implementados em um sistema de software como uma forma de requisitos de software desse sistema. Representam um importante conceito dentro do processo de definição de requisitos para sistemas de informação e devem ser vistas como uma declaração genérica sobre a organização. > As regras de negócio definem como o seu negócio funciona, podem abranger diversos assuntos como suas políticas, interesses, objetivos, compromissos éticos e sociais, obrigações contratuais, decisões estratégicas, leis e regulamentações entre outros.' > -- Regras de negócio > > - Wikipédia > Com essa definição, passamos para próximo passo que seria o UX/UI design (Desenho da experiência do usuário ou desenho da Interface do usuário)> 'De um modo simplificado, podemos dizer que em um projeto de um carro, por exemplo, a interface (também chamado de User Interface, Interface de Usuário ou apenas UI) é toda a parte “física” do veiculo; ou seja, a forma. Já a experiência (ou User Experience, UX) é o prazer que o veiculo te proporciona ao dirigi-lo; ou seja, a sua experiência de uso do veículo.' > -- Design Básico: Diferença entre UX e UI Design > > - Canha - Chocolate Design > Essa etapa com a regra de negócio em mãos, começa um estudo para ter a melhor forma de apresentação e experiência para o usuário.Após esse estudo, chegamos na etapa do design final. Onde todos os elementos que se mostraram necessários para a apresentação do negócio/produto ganham cores e formas mais harmônicas para o usuário. E assim, temos o layout final do projeto. Geralmente, o front-ender recebe os layouts das telas em formato PSD(Photoshop).Agora o trabalho do front-ender é transformar essas telas em páginas web, onde serão acessadas pelo navegador, como o exemplo de código que citei no inicio desse artigo.Em teoria, o back-end seria a última etapa, mas na maioria das vezes em paralelo ou antes, pois o front-end precisa saber como enviar alguns dados por meio de API e etc...> 'No contexto de desenvolvimento Web, uma API é um conjunto definido de mensagens de requisição e resposta HTTP, geralmente expressado nos formatos XML ou JSON. A chamada Web 2.0 vem abandonando o modelo de serviços SOAP em favor da técnica REST. > Enquanto você usufrui de um aplicativo ou sítio, este pode estar conectada a diversos outros sistemas e aplicativos via APIs sem que se perceba. > Um exemplo popular é a rede social Twitter, sendo possível ler e publicar mensagens.' > -- Interface de programação de aplicações > > - Wikipédia > Bom, a ideia foi mostrar um pouco do processo e aonde se encaixa o front-ender. O front-end é o elo entre o layout e o armazenamento de dados. Além de ser a estrutura da interface para o usuário, ele tem algumas preocupações a mais, como comunicação com o back-end, ser adaptável para todos os dispositivos e diferentes navegadores, código limpo e bem estruturado para o buscadores e etc..Espero que tenha contribuído, com esse meu primeiro artigo.Aceitando feedbacks. :)
