Desenvolvimento · Dicas & Tutoriais · Web

Cursos de React em vídeo grátis na Udemy

O React é um dos frameworks Javascript mais populares da atualidade. De uns anos para cá o uso dele em novos projetos vem crescendo – em grande parte pelo desânimo da comunidade com as novas versões do Angular – que, embora tenham melhorado no quesito performance, também cresceram no quesito complexidade. É notável o crescente interesse da comunidade e das empresas pelo React, por vantagens que ele oferece, como a desenvolver apps nativos, e não híbridos (como o Angular).

Pessoalmente, só experimentei trabalhar com Angular, e ainda sim curta experiência (ultimamente tenho me dedicado mais ao lado backend). Garimpando a Web, me deparei com dois cursos gratuitos disponíveis na Udemy.

Blog · Dicas & Tutoriais · Javascript · Web

Obtendo as teclas que estão sendo pressionadas ao mesmo tempo com Javascript e jQuery

Quem trabalha com desenvolvimento Web pode ter se deparado com a situação de precisar implementar algum comando via teclado, em estilo teclas de atalho, seja para recurso de acessibilidade ou para uma simples aplicação Web. Isso é possível, é fácil e basta algumas linhas de código Javascript.

Experimentando pela primeira vez o CodePen, resolvi escrever um tutorial simples a fim de explicar como implementar essa funcionalidade, com algumas poucas linhas de código. No exemplo uso a bilbioteca jQuery, além do JavaScript.

Dicas & Tutoriais · Padrões Web

Editores de texto em JavaScript/HTML para uso no seu site

Editor de Texto em JavaScriptNesta postagem rápida falarei de editores de texto feitos em JavaScript de código aberto, para uso em sites, blogs, entre outros.

A maioria funciona de modos parecidos: basta você adicionar uma área de texto em HTML (<textarea></textarea>), ligar o arquivo JavaScript da biblioteca – podendo definir algumas características – e pronto.

Via Google são fáceis de encontrar, mas aqui vou aproveitar para falar a respeito de dois deles com quem já lidei: o TinyMCE e o NicEdit.

TinyMCE – provavelmente o mais popular, utilizado inclusive pelo WordPress, Joomla, entre outros. Talvez seja o que conheça melhor, não por ter usado em algum trabalho, mas por curiosidade (fucei sua documentação e experimentei criar plugin, entre outros). Gostei muito: bem completo, integrado com jQuery (permite usar código desta biblioteca sem grande conflito), fácil de usar, boa documentação, entre outros.

CKEditor – nunca usei, mas parece ser tão bom quanto o TinyMCE. A barra de ferramentas é bem completa, a interface é linda, além de já vir com versão em português. Só tenho dúvidas com relação à documentação: procurei e não encontrei. Além de tudo, ao que parece, vários recursos são pagos (?). Enfim, vale ficar de olho.

NicEdit – já usei este, na seção de comentários deste blog, até um tempo atrás. Retirei ele por “comer” as quebras de linha (as tags <br /> – o texto do comentarista ficava todo colado). Acho-o muito limitado, mas talvez seja o mais simples de se integrar. Para quem não quer lidar com muito código, talvez seja a melhor solução.

Enfim, acredito que podemos resumir assim: caso queira um editor completo e precise personalizá-lo, o TinyMCE é para você. Se você quer um editor bonitão, vá de CKEditor. Agora, se você não entende muito de Javascript nem de HTML, experimente o NicEdit.

E este é o fim da postagem. E caso queira sair, aperte o botão de “Fechar” do seu navegador! 😀

Dicas & Tutoriais · Padrões Web

Gráficos SVG no Internet Explorer usando uma biblioteca JavaScript

É conhecida a limitação do Internet Explorer no que diz respeito a padrões Web. Uma das mais conhecidas é sobre o suporte à exibição de gráficos vetoriais SVG. No entanto, existe uma biblioteca Javascript chamada svgweb que procura cobrir essa limitação.

Linkando a biblioteca a um arquivo ela substituirá a parte em SVG (que é suportada pelos outros navegadores populares, como Firefox, Chrome e Opera) por um arquivo em Flash, que irá exibir praticamente a mesma coisa. Em outras palavras: se a biblioteca reconhecer que o navegador suporta SVG, ela não fará nada, apenas deixa o SVG ser exibido normalmente; se ele perceber que é o IE 8 e anteriores (que não suportam SVG) que o usuário está usando ele irá substituir por um arquivo em Flash que exibirá o arquivo SVG, com todos as suas configurações, como animação e interatividade.

Testei alguns exemplos e achei bem interessante. Ainda não testei na minha máquina, e sim apenas os exemplos fornecidos no site do projeto, e cumpriu bem a tarefa.

Trata-se de uma solução interessante. O iPad, por exemplo, suporta SVG, mas não animações em Flash; já o IE é o contrário. Usando essa biblioteca podemos programar apenas uma vez (SVG com JavaScript) e rodar em qualquer navegador.

Fica a dica. 😉

Dicas & Tutoriais · Padrões Web

Usando jQuery para manipular arquivos SVG

Em uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora nesta postagem, demonstrarei como usar a popular biblioteca jQuery para manipular arquivos SVG, usando um plugin.

Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.

Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.

Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).

[javascript]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG – o Básico</title>
<style type="text/css">
@import "css/jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
$(function() {
// Ao ser carregado, chamará a função draw…
$(‘#svgbasics’).svg({onLoad: draw});
});

function draw (svg) {
// Desenhando um círculo…
svg.circle(75, 75, 50, {fill: ‘none’, stroke: ‘red’, ‘stroke-width’: 3});

// Criando um grupo com duas linhas…
var g = svg.group({stroke: ‘black’, ‘stroke-width’: 2});
svg.line(g, 15, 75, 135, 75);
svg.line(g, 75, 15, 75, 135);

// Desenhando um retângulo que, quando clicado, chama o método alert
svg.rect(g, 150, 100, 200, 100, 10, 10,
{fill: ‘yellow’, stroke: ‘navy’, strokeWidth: 5, onclick:"alert(‘Você clicou!’)"});
}

</script>
</head>
<body>
<h1>jQuery SVG – O Básico</h1>
<p>Página de exemplo</p>
<div id="svgbasics"></div>
</body>
</html>
[/javascript]