Saiu o Bootstrap 4 Beta!

Foi lançada a versão BETA do novo Booststrap 4. Esperada por desenvolvedores web ansiosamente, essa versão promete novidades para a criação de sites cada vez mais compatíveis as diversas telas e resoluções na criação de aplicações web cada vez mais “responsivas”.

O Bootstrap é um conjunto de ferramentas de código aberto para desenvolvimento com HTML, CSS e JavaScript. Essa ferramenta permite a criação de um protótipo rapidamente, auxiliando em projetos, idéias e criação de aplicativos completos com as variáveis ​​Sass e mixins, sistema de grade responsivo, extensos componentes pré-construídos e plugins poderosos criados no jQuery.

Para baixar e experimentar a novidade, clique aqui meu jovem padawan.

Anúncios

Maujor, o dinossauro da Web, vem aí novamente

Dinossauro da CSS ministra aulas no Unipê

Quem trabalha com desenvolvimento Web já deve ter ouvido falar no Dinossauro das CSS. Considerado um dos introdutores das CSS no Brasil, que é uma linguagem de formatação de interfaces para Web, Maurício Samy Silva ministrará o módulo denominado Desenvolvimento de Interfaces para Web, da Especialização em Desenvolvimento de Aplicações para Web do Centro Universitário de João Pessoa – Unipê. Mais conhecido como Maujor, na área das Tecnologias da Informação – TIs, o professor abordará as três tecnologias do desenvolvimento front-end, que são a HTML5, as CSS3 e a JavaScript.

Basicamente, o desenvolvimento front-end engloba o conjunto das tecnologias responsáveis pelo que aparece na tela de visualização de um dispositivo, como o computador. “Nesse módulo, vamos estudar as camadas de desenvolvimento front-end”, comentou. “A HTML5 é uma linguagem de estruturação destinada a fazer com que o navegador entenda e transforme a marcação em um texto estruturado com títulos, subtítulos, parágrafos, etc. As CSS3 se destinam a apresentação da página Web, definindo cores, posicionamento e a montagem do layout. A JavaScript é a linguagem que permite definir comportamentos dos componentes da página Web”, explicou Maujor.

Segundo o professor, que é autor de 13 livros destinados aos assuntos do desenvolvimento front-end, serão 16h de aula nos dias 11, 12 e 13 de agosto. Maujor informou que os estudantes deverão montar componentes de um site por meio de um estudo dirigido produzido por ele. “O objetivo é nivelar o conhecimento dos alunos e, em cima desse nivelamento, montar a página inicial de um site, mostrando aos alunos o que temos de mais atual e mais moderno na área do desenvolvimento front-end”, disse.

O tema é a página de entrada de um site de venda de materiais de construção, contendo um slide show, componentes de vendas, barras de navegação, rodapé, ícones, etc. Como meio auxiliar de instrução, usarei uma interface, criada por mim, para que os estudantes possam experimentar, em tempo real, os efeitos das principais funcionalidades das CSS3, para depois empregar na criação da página de entrada do site”, adiantou.

Sobre Maujor

Maujor é Engenheiro Civil formado pelo Instituto Militar de Engenharia – IME do Rio de Janeiro e exerceu o magistério no Exército Brasileiro com aulas nas disciplinas de matemática e geometria descritiva. Maurício Samy Silva criou, em 1º de agosto de 2003, o site maujor.com, que tem a finalidade de ensinar as técnicas CSS e os padrões Web em geral. “Quando comecei, adotei esse nome para o meu site e acabei ficando conhecido por esse nome”, revelou. Maujor começou estudando as CSS entre 1999 e 2000, depois de se aposentar, buscando novos conhecimentos. “Eu comecei a estudar as técnicas de desenvolvimento front-end com 56 anos, e hoje eu tenho 72 anos”.

Maujor ministra palestras e workshops em diversos eventos de TI pelo Brasil nas áreas de desenvolvimento Web. “Quando criei meu site, não havia tantos eventos de TI. Hoje, existem vários, tanto na área de back-end como de front-end. Quando começaram a aparecer estes eventos no Brasil, passei a ser convidado para proferir palestras”, disse. Os 13 livros publicados por Maujor têm sites específicos cujos links se encontram no portal livrosdomaujor.com.br, que complementam o aprendizado do leitor. “A teoria sem a prática nada vale e a prática sem a teoria é cega. Então, os exercícios constantes de todos os meus livros estão funcionando nos sites dos livros” comentou.

Especialização em Desenvolvimento de Aplicações para WEB

O coordenador do curso, prof. Dr. Rodrigo Fujioka, ressaltou que este é o segundo módulo da segunda turma da pós-graduação, e que as inscrições continuam abertas para os interessados. “Esse é o único curso de Especialização em Desenvolvimento de Aplicações para Web aqui na Paraíba, e que tem esse diferencial de trazer professores desse calibre. Então é uma oportunidade única aqui no estado. Para aqueles que têm interesse, ainda existem vagas. As matrículas podem ser realizadas até o módulo 3″, disse. As inscrições podem ser realizadas no portal unipe.br/pos.

Caixa de ferramentas do JavaScript [parte 3]

Este é o último post da série Ferramentas JavaScript para desenvolvimento web. Encerramos fazendo um apanhado geral das técnicas e ferramentas mais empregadas pelos desenvolvedores da linguagem mundo afora.

js-cover

Automatizando as coisas com Grunt

Apesar do nome, Grunt está longe de ser primitivo. É uma robusta ferramenta de construção através de linhas de comandos que executa as tarefas definidas pelo usuário. Através da especificação de um arquivo de configuração simples, podemos configurar o Grunt para compilar LESS ou SASS, construir e minimizar todos os arquivos JavaScript e CSS em pastas especificas, ou mesmo executar uma ferramenta de linting ou framework de testes. Também é possível configurar o Grunt para executar como parte de um script personalizado do Git (Git hook) – minimizando e construindo seu código somente se houver algo no repositório de controle do código.

Continuar lendo

Caixa de ferramentas do JavaScript [parte 2]

Continuando nossa série sobre Ferramentas JavaScript para desenvolvimento web, iremos falar sobre os ambientes de desenvolvimentos e IDEs propícias para a linguagem. O objetivo é citar as principais opções que os desenvolvedores web do mundo inteiro tem utilizado nos últimos tempos.

f7dff-ides-linux-header


Ambiente de desenvolvimento JavaScript

Uma importante parte do desenvolvimento eficiente é o uso de uma IDE. Uma IDE, ou Ambiente de Desenvolvimento Integrado, é uma aplicação que oferece um conjunto de ferramentas para o desenvolvedor. A parte mais importante dessas ferramentas normalmente é o rico editor de texto, que oferece destaque das sintaxes, auto completar e teclas de atalho que acelera os processos manuais.

Sublime Text

O Sublime Text não é de fato uma IDE. Ele é leve, um editor de texto para programação super rápida, que oferece o destaque da sintaxe e teclas de atalhos intuitivas. Sendo multi plataforma, é excelente para os desenvolvedores que querem usar no Mac ou PC. Virtualmente tudo no Sublime Text pode ser customizado. Também oferece múltiplos plugins que permitem recursos como de uma IDE, por exemplo, a integração com Git e análise de erros no código (linting). Ela é uma ótima escolha para os entusiastas e novos desenvolvedores JavaScript. O Sublime Text pode ser baixado e avaliado gratuitamente, sua licença custa $70.

Fonte: Sublime Text

WebStorm

O WebStorm foi criado pela equipe da JetBrains como uma pequena IDE focada em HTML, CSS e JavaScript. O custo da licença é $49 e é amplamente considerado de fato como padrão para profissionais JavaScript, e por uma boa razão. O construtor de complementação de código e inspeção de ferramentas são inigualáveis. O WebStorm também oferece um depurador de JavaScript rico e integrado testes de unidade com os frameworks populares, como: execução de testes Karma e JSDriver e até o Mocha do Node.js.

Uma das melhores funcionalidades do WebStorm é a funcionalidade de Edição ao Vivo. Instalando um plugin em ambos Chrome e WebStorm, um desenvolvedor pode fazer mudanças no código que são instantaneamente refletidos no navegador. Os desenvolvedores podem também configurar a Edição em Tempo Real para destacar as mudanças que são feitas na janela do navegador, permitindo depuração e alta produtividade durante a codificação.

No geral, o WebStorm é a IDE para escolher se usar JavaScript em tempo integral.

Fonte: JetBrains

Brackets

Continuar lendo

Microsoft disponibiliza código de seu motor Chakra

A Microsoft abriu, nesta quinta-feira (14/01), o código do Chakra Javascript, que já está disponível no GitHub. Seu motor é usado no Windows Edge, Xbox e em outros programas do Windows.

O projeto de código aberto inclui todas as ferramentas necessárias para analisar, interpretar, compilar e executar o código JavaScript sem depender do Edge. Isso permite que os desenvolvedores incorporem o motor em seus projetos e ampliem sua utilização.

Fonte: Redação Imasters

Caixa de ferramentas do JavaScript [parte 1]

Programar em JavaScript tornou-se algo fundamental na web 3.0. Se você quiser criar um site ou um sistema web com funções aprimoradas de forma prática, é essencial buscar ferramentas JS e incluir em seu projeto. Irei postar aqui uma série de 3 posts relativos a essa linguagem e citando as principais opções que desenvolvedores web do mundo inteiro devem ter em sua caixinha de ferramentas.

A plataforma Web percorreu um longo caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de construir aplicações complexas. Para atender novas demandas muitas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas.

Esta serie especifica de artigos irá um passo além e se concentra em como essas tecnologias podem ser usadas na prática, não somente para construir demonstrações ou protótipos, mas como os profissionais tem usado elas em produção. Nessa serie de artigos pós HTML5, vamos além do modismo e mostraremos detalhes práticos dos especialistas sobre o que realmente funcionou com eles. Também abordaremos tecnologias (como AngularJS) que vão um passo além e definem o futuro de como os padrões e desenvolvimento web irão evoluir.

Essa serie de artigos é original do site InfoQ, chamado de “Próxima geração do HTML5 e JavaScript“. Se quiser. você pode assinar para receber notificações via RSS.


O JavaScript é uma linguagem de script desenhada inicialmente para tratar páginas web, mas agora é usada em quase todas as formas imaginavéis. Avanços foram feitos para permitir que o JavaScript execute no lado servidor bem como compilado em código de aplicações nativas para telefones. Hoje o desenvolvedor JavaScript faz parte de um rico ecossistema formado por centenas de IDEs, ferramentas e frameworks. Com muitas opções e recursos, alguns desenvolvedores podem encontrar dificuldade de saber como começar. Nesse artigo será discutido sobre o perfil do moderno desenvolvedor JavaScript, iniciando com uma breve história do JavaScript e apresentado os mais populares frameworks, ferramentas e IDEs.

Uma breve excursão através da história

Vamos voltar para 1995 quando o Netscape Navigator e o Internet Explorer 1.0 eram as escolhas disponíveis de navegadores. Os sites web tinham apenas textos e muitos GIFs. Um site completo de conteúdo rico demorava 2 minutos para carregar em uma conexão discada (dial-up). Ao longo do caminho, uma linguagem web nasceu permitindo que esses sites web antigos pudessem executar código no lado cliente. Esse foi o ano que nasceu o JavaScript.

Os sites web de 20 anos atrás não usavam muito JavaScript e certamente não usavam seu potencial total. Ocasionalmente havia um alerta popup para informar algo, a rolagem de um texto em uma caixa com notícias ou um cookie que armazenava seu nome e apresentava novamente quando retornasse alguns meses depois. Certamente não havia empregos nos quais o JavaScript era a linguagem primaria, salvo aqueles poucos sortudos que tinham o trabalho de criar o JavaScript. Em resumo, era um truque para os sites web enfeitarem os seus DOM.

Hoje, o JavaScript pode ser encontrado virtualmente em todos os locais. Do AJAX, ao Bootstrap, ReactJS, Angular, o ubíquo jQuery e mesmo o Node.js no lado servidor, o JavaScript se tornou uma das mais importantes e populares linguagens da web.

Frameworks

Continuar lendo

Google traz o Material Design Lite com CSS, HTML e JavaScript

O Material Design Lite (MDL) do Google permite adicionar o look and feel do Material Design em websites. O Material Design é a linguagem visual padrão para Android e que, agora, o Google propõe como multiplataforma.

De acordo com o Google, o MDL têm os requisitos para que seja caracterizado como “lite”:

  • Tem poucas dependências de forma que é fácil de instalar e usar;
  • Não depende de frameworks, permitindo que os desenvolvedores façam sua integração com qualquer cadeia disponível de ferramentas para front-end;
  • Sua base de código é relativamente pequena;
  • Têm foco restrito, implementando as boas práticas do material design e não é um framework abrangente.

O MDL não é a primeira implementação de HTML/CSS/JS do material design e existem alternativas como o Materialize e Material Bootstrap. A principal vantagem que o MDL trás em relação a estas opções desenvolvidas pela comunidade, de acordo com o Google, é que o MDL foi desenvolvido “com a colaboração das equipes de Material Design e Chrome UX e é constantemente revisado buscando aderência às especificações do material design”.

Antes do MDL, o Polymer era a implementação canônica de material design para CSS/JS. Porém, comparado ao MDL, o Polymer tem escopo maior e vai além do domínio visual, incluindo componentes para comunicação de dados e componentes não especificados pelo material design.

Até o presente momento, o MDL não é otimizado nem suporta o uso de componentes individuais, por exemplo, um botão. Ainda sim, para desenvolvedores que querem usar apenas uma parte dos componentes MDL, é possível criar uma distribuição MDL customizada comentando componentes indesejados do material-design-lite.css e scripts inadequados do Gulpfile. Feito isso, basta executar gulp.

O MDL segue a convenção BEM de forma que os nomes para cada classe css são consistentes, isolados e expressivos. O Google detalha quais boas práticas eles seguiram ao aplicar BEM no desenvolvimento do MDL. Por outro lado, o BEM pode levar a explosão no comprimento dos nomes de classes e, de acordo com o feedback inicial, o MDL parece ser sensível a esse problema, por exemplo, ao necessitar de dezessete nomes de classe diferente para um simples card que é um conceito básico do material design.

O Google afirma que o MDL funciona em todos os navegadores modernos (Chrome, Firefox, Opera, Microsoft Edge e Safari) com degradação suave em navegadores como o IE9. Também sugerem referenciar a CDN para incluir o MDL no website, mas também é possível baixar ou importá-lo via npm ou Bower.

Fonte: InfoQ Brasil