Como Comentar Códigos HTML, CSS e JavaScript

Saiba como comentar adequadamente nas linhas de códigos HTML, CSS e Javascript!

Certamente, quando desenvolvemos códigos de programação web como os documentos HTML, CSS e Javascript, por exemplo,  é comum querermos deixar um comentário sobre algum trecho de código.

Às vezes queremos nos lembrar sobre algum trecho, afim de lembrar o que é e pra quê serve o código ali presente.

Então porque não fazer comentários em trechos de códigos HTML, CSS e Javascript do jeito certo?

Ademais, note que os códigos de comentários, quando feitos do jeito certo, não aparecem nos navegadores,, ou seja, ficam apenas no código do documento.

Comentários no HTML: <!– –>

<!-- Comentário ou pra quê serve o trecho -->
<div class="content">
Aqui está algum conteúdo HTML normal!
</div>

Agora, só para exemplificar, veja como comentar várias linhas:

<!--
Este comentário não vai aparecer
no site, Podemos escrever quantas
linhas quisermos para diversos fins.
Uma verdadeira mão na roda quando precisamos
l embrar pra que serve algum código. 😁
-->

Assim sendo, você pode também desabilitar trechos inteiros apenas comentando o código como abaixo.

Sobretudo, principalmente quando precisamos desabilitar funções ou simplesmente deixar um trecho pronto para copiar e utilizar.

<!--
<div class="content">
Aqui está algum conteúdo HTML normal!
</div>
-->

Comentando no CSS /* */

Nos documentos em CSS, decerto, a funcionalidade e aplicação é a mesma do HTML, porém as tags são diferentes

Por exemplo, veja abaixo comentários em uma linha e em várias:

/* Este comentário será ignorado pelo browser. */
.titulo {
font-size: 1.5rem;
line-height: 1.2;
color: #696969;
}

/*
Este comentário não vai aparecer
no site e por isso podemos até
escrever um pequeno tutorial sobre
a funcionalidade do trecho abaixo.
*/p {
color: red;
text-align: center;
}.titulo {
font-size: 1.5rem;
line-height: 1.2;
color: #696969;
}

/*trecho desabilitado
p {
color: red;
text-align: center;
}
*/.titulo {
font-size: 1.5rem;
line-height: 1.2;
color: #696969;
}

Comentando em documentos Javascript  / / e /* */

A saber, nos códigos escritos em HTML e CSS, podemos comentar uma linha única ou várias com as mesmas tags.

Ademais, no Javascript usamos a tag / / para comentários em uma única linha.

// Este texto está comentado e será ignorado!

const START_CODE = convertHexToDec('25E4'); // numeração inicial
const END_CODE = convertHexToDec('27BF'); // numeração final

Portanto, agora para comentar várias linhas no Javascript usamos as tags /* */

/*
Função: function drawTable()
Esta função faz algo incrível!
Só não sei o que ela faz. 😅
*/ function drawTable(table, start, end) {
for (let i = start; i < end; i++) {
table.appendChild(createCell(i));
}
}

/*
Função: function drawTable()
Como não sei pra que serve!
melhor desabilitar, será? 🙄
*/
/*
function drawTable(table, start, end) {
for (let i = start; i < end; i++) {
table.appendChild(createCell(i));
}
}
*/

Aliás, espero que tenha gostado dessa postagem.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post Comentar HTML, CSS e JavaScript apareceu primeiro em Web-Zoneware.

Propriedades das Bordas em CSS:

border-width: espessura da borda
border-style: estilo da borda
border-color: cor da bordaborder-top-width: espessura da borda superior
border-top-style: estilo da borda superior
border-top-color: cor da borda superiorborder-right-width: espessura da borda direita
border-right-style: estilo da borda direita
border-right-color: cor da borda direitaborder-bottom-width: espessura da borda inferior
border-bottom-style: estilo da borda inferior
border-bottom-color: cor da borda inferiorborder-left-width: espessura da borda esquerda
border-left-style: estilo da borda esquerda
border-left-color: cor da borda esquerdaborder-top: todas as bordas superior
border-right: todas as borda direita
border-bottom: todas as bordas inferior
border-left: todas as bordas esquerda
border: todas as quatro bordas

Valores das Propriedades das Bordas em CSS:

CÓDIGO DE CORES:
hexadecimal: #FF6347
rgb: rgb(255, 99, 71)
rgba: rgb(255, 99, 71, 0.7)
hsl: hsl(9, 100%, 64%)
CMY: 0.0000, 0.6118, 0.7216
CMYK: 0.00, 0.61, 0.72, 0.00
palavra-chave: tomato, red, blue, green entre outras cores web
transparente: transparentstyle:
none: nenhuma borda
hidden: equivalente a none
dotted: borda pontilhada
dashed: borda tracejada
solid: borda contínua
double: borda dupla
groove: borda entalhada
ridge: borda em ressalto
inset: borda em baixo relevo
outset: borda em alto relevowidth:
thin: borda fina
medium: borda média
thick: borda grossa
length: unidade de medida CSS (px, pt, em, cm, ...)

Veja as propriedades na Prática:

No HTML:

<h3>Borda média, contínua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>

No CSS:

h3 {
border-width: medium;
border-style: solid;
border-color: #00f;
}p {
border-width: 6px;
border-style: dashed;
border-color: #f00;
}

O visual do documento HML será:

Borda média, contínua e da cor Tomato

Borda 6px, tracejada e da cor Tomato

Para ver a tabela de cores web nomeadas visite TABELA DE CORES WEB NOMEADAS

A Propriedade CSS border-style

No HTML

Exemplo de todos os tipos de propriedades border-style no CSS.

<p>none e hidden - sem borda</p>
<p>solid - borda contínua</p>
<p>double - borda dupla</p>
<p>dotted - borda pontilhada</p>
<p>dashed - borda tracejada</p>
<p>groove - borda entalhada</p>
<p>ridge - borda em ressalto</p>
<p>inset - borda em baixo relevo</p>
<p>outset - borda em alto relevo</p>

No CSS:

No exemplo CSS abaixo só utilizarei um exemplo, mas na prática é só alterar a propriedade border-style.

p {
border-style solid;
text-align: center;
}

Abaixo os exemplos práticos de estilos de bordas

none e hidden – sem borda

solid – borda contínua

double – borda dupla

dotted – borda pontilhada

dashed – borda tracejada

groove – borda entalhada

ridge – borda em ressalto

inset – borda em baixo relevo

outset – borda em alto relevo

asdasda

A Propriedade CSS border-width

No HTML:

<p>Borda com espessura à esquerda de 3px e inferior de 5px</p>

No CSS:

p {
border-style: solid;
border-bottom-width: 5px;
border-top-width: 0;
border-right-width: 0;
border-left-width: 3;
}

Na prática você terá esse efeito:

Borda com espessura inferior de 5px e à esquerda de 3px

asdasdasdasda

A Propriedade CSS border (declaração única)

Você pode também declarar todos os valores de maneira abreviada

No HTML:

<p>Bordas em declaração única</p>

No CSS:

p{
thick groove tomato
}

Na prática você terá esse efeito:

Bordas em declaração única

Nota importante para declarações em CSS para bordas

Siga esta hierarquia para declarar seus documentos CSS de Bordas:

border-width: medida da borda
border-style: o estilo da borda
border-color: a cor da borda (se não declarado a borda será preta)

Veja alguns exemplos de aplicações no CSS:

solid border /* borda contínua, espessura média, cor preta automática */
15px ridge border /* borda em ressalto, espessura 15px, cor preta automática */
double green border /* borda dupla, espessura média, cor verde */
10px solid red border /* borda contínua, espessura 10px, cor vermelha */

Você também pode declarar o estilo CSS de bordas diretamente no HTML, porém alguns navegadores, principalmente os não atualizados podem dar algum erro. mas é algo que a se postar pois facilita e muito a vida dos desenvolvedores.

Exemplo usado nesta página:

<p style="border: 10px solid tomato; text-align: center;">solid - borda contínua</p>

No caso a declaração style, com efeito,  se refere ao estilo do parágrafo que tem uma borda sólida de 10 pixels da cor tomato e alinhamento centralizado. Assim sendo, dê uma olhada e tente achar nos exemplos desta página para entender melhor.

Ou seja, este tipo de aplicação serve para outras marcações como títulos, iframes, divs entre outras.

Concluindo, uma verdadeira mão na roda na hora de escrever códigos em HTML e CSS na unha como eu faço. Risos.

Aliás, espero que tenha gostado dessa postagem.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post Propriedade de Bordas em CSS – CSS Border apareceu primeiro em Web-Zoneware.

Como Inserir Espaços no HTML

As Entidades: &nbsp;, &ensp; e &emsp;

Insira Espaços Diretamente nos seus Documentos HTML sem o uso de CSS?

Aqui você terá um apanhado básico de como usar espaços do HTML de forma prática.

Parágrafos

O uso da tag <p> </p> por si só gera quebra de linhas entre sentenças criando parágrafos mesmo com sentenças escritas na mesma linha.

<p>Primeiro parágrafo.</p>
 
<p>Segundo parágrafo</p>
&nbsp;

Entidade &nbsp; (non-breaking space)

Para criar regras de tabulações, podemos utilizar  a entidade &nbsp;, &ensp; e &emsp;

Veja exemplos:

<p>Portal&nbsp;do&nbsp;Economaster</p>
<p>Portal do Economaster</p>
<p>Portal&ensp;do&ensp;Economaster</p>
<p>Portal&emsp;do&emsp;Economaster</p>
 

Usando os códigos acima, o documento HTML apresentará os efeitos abaixo:

Portal do Economaster

Portal do Economaster

Portal do Economaster

Portal do Economaster

No documento HTML mesmo se você apertar a tecla espaço 4 vezes, o navegador só contará o uso de um espaço entre sentenças de caracteres, Por isso o uso da entidade &nbsp; é uma verdadeira mão na roda.

Uma outra utilização para a entidade &nbsp; é o de criar espaços maiores entre parágrafos.

Veja exemplos:

<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
 

Primeiro parágrafo

Segundo parágrafo

Agora com a entidade &nbsp;:

<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
 

Primeiro parágrafo

Segundo parágrafo

É como se existisse um parágrafo oculto ou um espaçamento maior entre parágrafos. Mas essa não é a melhor forma.

Espaço com a tag <br/> (break)

A melhor forma de inserirmos linhas entre parágrafos é usando uma quebra de linhas (break lines).

Veja exemplo a seguir usando a tag <br/>

<p>Como quebrar linhas<br/>mesmo usando a tag de parágrafo</p>
 

Como fica do documento HTML:

Como quebrar linhas
mesmo usando a tag de parágrafo

Agora usando a tag <br/> para inserir linhas:

<p>Inserindo quebra de<br/><br/><br/><br/>quatro linhas</p>
 

Inserindo quebra de

quatro linhas

Usando <p> e <br/> em textos HTML

Existe uma pequena diferença entre os espaços criados no uso das tags <p> e <br/>.

Nas tags de parágrafos <p>, por padrão, existe uma margem em torno de 1em, enquanto que se usarmos uma quebra <br/> isso não existe, ou seja, com uma quebra de linha, apena criamos mais uma linha com espaçamento diferente daquela oriunda da criação de um novo parágrafo.

Vejamos o exemplo abaixo do poema Pontinho de vista, de Pedro Bandeira.

<p>Eu sou pequeno, me dizem,<br/>
e eu fico muito zangado.<br/>
Tenho de olhar todo mundo<br/>
com o queixo levantado.</p>
<p>Mas, se formiga falasse<br/>
e me visse lá do chão,<br/>
ia dizer, com certeza:<br/>
- Minha nossa, que grandão!</p>
 

Agora vejamos como o texto fica no documento HTML com as devidas marcações <p> e <br/>:

Eu sou pequeno, me dizem,
e eu fico muito zangado.
Tenho de olhar todo mundo
com o queixo levantado.

Mas, se formiga falasse
e me visse lá do chão,
ia dizer, com certeza:
– Minha nossa, que grandão!

Observe que o texto fica mais bonito visualmente e que a distância entre os parágrafos é diferente de uma quebra simples de linha.

Aliás, espero que tenha gostado desse Formatador e limpador de códigos de Tabelas HTML do MS Excel.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.
• Mortadela Show – Muito assunto divertido, guia do cubo mágico, curiosidades e muito mais.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post Como Inserir Espaços no HTML apareceu primeiro em Web-Zoneware.

Declarando o Idioma em documentos HTML

Use a marcação de idioma nos seus documentos HMTL para web!

Para que seu conteúdo seja acessado corretamente nos navegadores e não reproduzam erros, utilize marcações de linguagem.

Muitos editores de conteúdo web usam softwares para criação de modelos prontos, como por exemplo o Sublime ou o Adobe Dreanwaver. entre outros.

Ademais, no meu caso, eu já prefiro elaborar conteúdos no editor de texto, “na unha”, ou no máximo, usando o Notepad ++, um editor de textos mais elaborado.

Portanto, no caso de editores da velha guarda como eu, que aprendi a fazer tudo na raça, ter um norte na hora de pegar os códigos é uma verdadeira mão na roda.

Por isso deixo nesta página, com o intuito de trazer de forma simples, os atributos de linguagem para documentos HTML.

À propósito, também aproveito para trazer algumas informações básicas sobre as tags e meta tags usadas na web para declarar idiomas nos cabeçálhos das páginas web.

Saiba como utilizar corretamente a marcação de linguagem em documentos HTML com a finalidade de melhorar a exibição de caracteres e melhoria de ranqueamento em relação ao público alvo!

Definir a linguagem padrão do HTML

Por exemplo, veja a marcação via meta tag nativa:

<meta http-equiv="Content-Language" content="pt-br">

Você pode utilizar vários valores de linguagem de fato.

<meta http-equiv="Content-Language" content="pt-br, en, fr, it, ru">

Bem como existe também a possibilidade de fazer via HTTP Header

HTTP/1.1 200 OK
Date: Fri, 30 Dez 2011 10:46:04 GMT
Server: Apache/1.3.28 (Unix) PHP/4.2.3
Content-Location: CSS2-REC.en.html
Vary: negotiate,accept-language,accept-charset
TCN: choice
P3P: policyref=https://www.w3.org/2001/05/P3P/p3p.xml
Cache-Control: max-age=21600
Expires: Wed, 05 Nov 2003 16:46:04 GMT
Last-Modified: Tue, 12 May 1998 22:18:49 GMT
ETag: "3558cac9;36f99e2b"
Accept-Ranges: bytes
Content-Length: 10734
Connection: close
Content-Type: text/html; charset=utf-8
Content-Language: pt-br

Não muito utilizado, assim também podemos utilizar marcação de linguagem diretamente no texto como no exemplo abaixo:

<p>Nós utilizamos o <span lang="en">mouse</span> para navegar na
<span lang="en">web</span> por meios dos <span lang="en">browsers</span>.

Desta maneira indicamos ao navegador qual a linguagem utilizada para que não ocorram erros de sintaxe e apareçam erros, principalmente em acentos e outros caracteres específicos da linguagem utilizada.

Uso Prático em documentos HTML5 padrão

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Título</title>
</head>
<body>
</body>
</html>

O órgão regulador da internet, ou seja, a W3C, recomenda a utilização de marcadores de linguagem no documento HTML, assim sendo, uma forma de boas práticas para definir o público alvo sobre o conteúdo disponibilizado.

Existe ainda uma melhoria, principalmente em relação aos muitos caracteres específicos que podem ter problemas na hora de serem visualizados pelos navegadores na web.

Para que não haja problemas com caracteres do tipo ASCII ou outros utilizados em linguagens específicas como a Russa, a Chinesa, japonesa entre outras, usa-se a marcação Unicode – UTF-8 para estabelecer que o documento seja lido em qualquer navegador no mundo inteiro.

Se acaso precisar mudar a meta tag charset, basta substituir utf-8 para para iso-8859-1.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Título da Página</title><link href="css/stylesheet.css" rel="stylesheet"/>
<script src="scripts/script.js"></script>
</head>
<body>...</body>
</html>

E se eu não utilizar a marcação de linguagem?

Portanto veja a ordem de processamento dos navegadores na detecção da linguagem do documentos HTML:

Primeiramente o navegador verifica se o elemento HTML que tem o atributo lang.

Logo após verifica se a tag pai mais próxima ao termo tem o atributo lang.,

Se ainda não encontrou, logo depois vê se o documento HTML tem a metatag definida,

Então, se mesmo assim não encontrar, verifica se o HTTP Header Content-Language tem uma tag de idioma definido.

Se não detecta nenhuma tag ou menção de linguagem, assim sendo, o idioma é tratado como não reconhecido.

Aliás, espero que tenha gostado dessa postagem sobre como declarar o idioma do seu documento HTML.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post Declarando o Idioma no HTML apareceu primeiro em Web-Zoneware.

Como mesclar células de tabelas HTML

Use o tutorial abaixo e seus problemas acabaram!

Aprenda a mesclar célula em tabelas HTML

Veja a tabela padrão abaixo:

Exemplo de mescla em tabelas usando COLSPAN

Tabela de Produtos

MESCLANDO CÉLULAS NA HORIZONTAL (COLSPAN)

Para mesclar células de colunas na horizontal, ou seja, mesclar células de colunas com os mesmos conteúdos na mesma linha, inserimos um parâmetro da tag <td> chamado colspan.

Então repare com atenção o conteúdo das colunas que serão mescladas na mesma linha.

<h4>Tabela de Produtos</h4>
<table>
<tbody>
<tr>
<th colspan="3">Tabela de Produtos</th>
</tr>
<tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td>Eletrodomésticos</td>
<td>Geladeira</td>
<td>R$ 1.200</td>
</tr>
<tr>
<td>Eletrodomésticos</td>
<td>Liquidificador</td>
<td>R$ 200</td>
</tr>
<tr>
<td>Eletrodomésticos</td>
<td>Batedeira</td>
<td>R$ 180</td>
</tr>
</tbody>
</table>

Usando COLSPAN

Portanto, veja o atributo colspan em funcionamento onde se encontra a palavra “Tabela de Produtos”.

MESCLANDO CÉLULAS NA VERTICAL (ROWSPAN)

Portanto, no mesmo exemplo onde se repetem as células Eletrodomésticos, por exemplo, vamos mesclar as linhas dentro da mesma coluna usamos dentro da tag <td> o parâmetro rowspan.

Então repare com atenção as linhas que serão mescladas numa mesma coluna.

<h4>Tabela de Produtos</h4>
<table>
<tbody>
<tr>
<th colspan="3">Tabela de Produtos</th>
</tr>
<tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td rowspan="3">Eletrodomésticos</td>
<td>Geladeira</td>
<td>R$ 1.000</td>
</tr>
<tr>
<td>Liquidificador</td>
<td>R$ 200</td>
</tr>
<tr>
<td>Batedeira</td>
<td>R$ 180</td>
</tr>
</tbody>
</table>

Uso de ROWSPAN

Portanto, veja o atributo rowspan em funcionamento onde se encontra a palavra “Eletrodomésticos”.

Aliás, espero que tenha gostado de aprender Como Mesclar Células de Tabela HTML.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post Como Mesclar Células de Tabela HTML apareceu primeiro em Web-Zoneware.

Estudo e Desenvolvimento de Códigos Web

Fontes de estudo e desenvolvimento de códigos criativos web

Incríveis links para estudo e desenvolvimento de códigos criativos WEB

Quer aprender tudo sobre aplicações web?

Aqui você terá uma vasta gama de fontes de estudo e desenvolvimento de informações.

São links, livros, cursos completos e muita ferramenta para você aprender muito e desenvolver aplicativos criativos web.

Uma verdadeira biblioteca para aprendizagem e conteúdo

Índice de Conteúdos Estudo e Desenvolvimento

• Livros
• Livros Online
• Cursos
• Ferramentas
• Recursos de Aprendizagem
• Comunidades
• Matemáticos
• Aprendizado de máquina • Visão computacional • Ai
• Inspirações
• Eventos
• Escolas • Workshops
• Blogs • Websites
• Relacionados

Estudo e Desenvolvimento de Códigos Web

LIVROS

• Generative Art: A Practical Guide – Guia prático de processamento.
• Generative Design – Visualize, programe e crie com processamento.
• The Nature of Code – Simulando sistemas naturais com Processing.
• Programming Design Systems – Introdução prática aos novos fundamentos do design gráfico.
• Learning Modern 3D Graphics Programming – Série de tutoriais sobre o uso do OpenGL para renderização gráfica.
• Programming Interactivity – Guia do designer de processamento, Arduino e openFrameworks.
• openFrameworks Essentials – Guia para iniciantes do openFrameworks para programador, artista visual ou designer.
• Mastering openFrameworks: Creative Coding Demystified – Avançado guia detalhado para openFrameworks.
• Algorithms for Visual Design Using the Processing Language – Experimente problemas de design para criar animações 3D, GUIs e muito mais.
• Foundation HTML5 Animation with JavaScript – Tudo o que você precisa saber para criar animação usando a tela HTML5.
• Playing with chaos – Fractais de programação e atratores estranhos em JavaScript.
• Ray Tracing in One Weekend – Mini livro sobre Ray Tracing.
• Processing 2: Creative Programming Cookbook – Orienta você a explorar o ambiente de processamento usando receitas práticas e úteis.
• Data-driven Graphic Design – Codificação Criativa para Comunicação Visual.
• Real-Time Rendering – Aprenda a usar técnicas modernas para gerar imagens tridimensionais sintéticas em uma fração de segundo.
• Graphics Shaders: Theory and Practice -Introdução à programação de sombreadores em geral, mas com foco na linguagem de sombreamento GLSL.
• Anton’s OpenGL 4 Tutorials – Guia prático para iniciar a programação 3D com o OpenGL.
• Physics for JavaScript Games, Animation, and Simulations – Ensina aos programadores de JavaScript como incorporar física real em seus jogos, animações e simulações em HTML5.
• Math for Programmers – Livro ensina a resolver problemas matemáticos no código.

LIVROS ONLINE

• The Book of Shaders -Guia passo a passo através do universo abstrato e complexo de shaders de fragmentos.
• WebGL Fundamentals – WebGL desde o início. Nenhuma mágica.
• WebGL 2 Fundamentals – WebGL2 a partir do zero. Nenhuma mágica.
• Learn OpenGL – Recurso de tutorial abrangente para aprender o OpenGL moderno.
• Scratchapixel 2.0 – Aprenda computação gráfica do zero.
• ofBook – Livro / guia escrito pela comunidade no openFrameworks.
• OGLdev – Coleção de tutoriais modernos sobre OpenGL de Etay Meiri.
• OpenGL Tutorial – Site dedicado a tutoriais para o OpenGL 3.3 e posterior.
• Open.gl – Guia que ensina o básico do uso do OpenGL.
• Pixel Shaders -Introdução interativa à programação gráfica.
• OpenGLBook – Tutorial de programação OpenGL gratuito em formato de livro online.
• Graphics Programming Projects – Livro sobre gráficos computacionais 3D de Morgan McGuire.
• On Generative Algorithms – Notas sobre a geração de vários padrões orgânicos, com exemplos e código Python, de Anders Hoff.
• Computer Graphics from Scratch – Um livro de raytracing e rasterização que ensina como o OpenGL e trabalhos em  DirectX.
• A Primer on Bézier Curves – Um livro grátis para quando você realmente precisa saber como fazer as coisas de Bézier.

CURSOS

• Create 3D Graphics in JS Using WebGL – Comece a criar conteúdo com o WebGL sem nenhuma estrutura.
• Learn HTML5 Graphics and Animation – Introdução à API de desenho 2D da tela.
• Interactive 3D Graphics – Curso Udacity que ensina os princípios da computação gráfica em 3D.
• Interactive Computer Graphics – Curso de computação gráfica da Coursera.
• Kadenze Creative Coding – Seleção de cursos Kadenze que cobrem p5.js, TensorFlow, Max / Jitter e ChucK.
• Think. Create. Code – Curso EDX para aprender a programar com o ProcessingJS.
• Creative Programming for Digital Media & Mobile Apps – Curso Coursera sobre codificação criativa com processamento.
• Imaginary Institute – Aprenda a criar lindos gráficos interativos.
• Future Learn: Creative Coding – Use a programação de computadores como uma disciplina criativa para gerar sons, imagens, animações e muito mais.
• Intro to JS: Drawing & Animation – Use JavaScript e a biblioteca ProcessingJS para criar desenhos e animações.
• Advanced JS: Natural Simulations – Combine JS, ProcessingJS e conceitos matemáticos para simular a natureza em seus programas
• Interactive Data Visualization with Processing – Aprenda a ler, mapear e ilustrar dados com o Processamento.
• Programming Data Visualizations: A Coding Toolkit for Processing – Junte-se ao designer de informações Nicholas Felton no mundo do Processing.
• Introduction to Data Visualization – Junte-se a Nicholas Felton para obter uma introdução inteligente, abrangente e inspiradora à visualização de dados.
• Programming Graphics I, 2, 3 – Aprenda arte generativa e processamento com arte com Joshua Davis.
• Creative Coding with Canvas & WebGL – Workshop de Matt DesLauriers. que ensina arte generativa, animações interativas, gráficos 3D e shaders.

FERRAMENTAS

Frameworks • Libraries • Ecosystems

• Processing [Cross-platform] – Linguagem de programação de computadores e IDE para artes visuais.
• Cinder [Cross-platform] – Biblioteca de código aberto para codificação criativa de qualidade profissional em C ++.
• openFrameworks [Cross-platform] – Kit de ferramentas C ++ de código aberto para codificação de criativos.
• C4 [iOS] – Estrutura de codificação criativa de código-fonte aberto para iOS.
• Unity [Mac, Win] – Mecanismo de jogo, mas útil para codificação e instalações criativas.
• PlayCanvas [Cross-platform] – Mecanismo WebGL colaborativo de código aberto em tempo real.
• hg_sdf [Cross-platform] – Biblioteca GLSL para criar funções de distância assinada.
• HYPE [Cross-platform] -HYPE_processing, é uma coleção de classes que executa tarefas pesadas enquanto usa uma quantidade mínima de escrita de código.
• nannou [Cross-platform] – Estrutura de codificação criativa de código-fonte aberto para a linguagem Rust
• thi.ng [Cross-platform] – Coleção de código aberto de ferramentas de design computacional para as linguagens Clojure e ClojureScript
• PixelKit [iOS, Mac] – Código aberto, gráficos ao vivo, estrutura Swift, com tecnologia Metal.
• OPENRNDR [Cross-platform] – Biblioteca de código aberto para codificação criativa escrita em Kotlin.

Linguagem de Programação Visual

• vvvv [Win] – Ambiente de programação ao vivo híbrido visual / textual para fácil criação de protótipos e desenvolvimento.
• NodeBox [Mac, Win] – GUI de plataforma cruzada e baseada em nó para visualizações de dados eficientes e design generativo.
• TouchDesigner [Mac, Win] – Plataforma de desenvolvimento visual para criar projetos em tempo real.
• Quartz Composer [Mac] – Ferramenta de desenvolvimento para processamento e renderização de dados gráficos.
• Vuo [Mac] – Ambiente de programação de mídia interativa ao vivo.
• Max [Mac, Win] – Linguagem de programação visual para mídia.
• Pure Data [Cross-platform] – Linguagem de programação visual de código aberto para multimídia.
• i-score [Cross-platform] – Sequenciador interativo para controlar bibliotecas de códigos criativos e kits de ferramentas.
• tooll [Win] – Ferramenta de código aberto para criar animações e conteúdo 3D interativos.
• XOD [Cross-platform] – Linguagem e ambiente de programação visual de código aberto para projetos baseados em microcontroladores.
• Isadora [Cross-platform] -Software de controle de mídia baseado em cena com mapeador de projeção integrado.
• cables [Cross-platform/Web] – Seu kit de modelo para criar um belo conteúdo interativo. Atualmente na versão beta privada, os convites podem ser solicitados.
• Notch Builder [Win] – Ferramenta de autoria baseada em nó, com forte foco em gráficos em tempo real.

Linguagem de programação Sonora

• SuperCollider [Multi-platform] – Plataforma para síntese de áudio e composição algorítmica.
• ChucK – Linguagem de programação de música com ritmo intenso, simultâneo e em movimento.
• TidalCycles – Idioma específico do domínio para codificação ao vivo do padrão.
• Sonic Pi – O sintetizador de música ao vivo para todos.
• Csound – Um sistema de computação de som e música.

Bibliotecas de Programação WEB

• three.js – Biblioteca 3D JavaScript.
• regl – WebGL funcional.
• Stackgl – Ecossistema de software aberto para WebGL, construído sobre navegador e npm.
• Paper.js – O canivete suíço de scripts de gráficos de vetor.
• Pixi.js – Mecanismo de renderização 2D do HTML 5 que usa webGL com fallback de tela.
• p5.js – Biblioteca JavaScript que começa com o objetivo original de Processamento.
• Pts.js – Biblioteca JavaScript para visualização e codificação de criativos.
• Fabric.js – Biblioteca de telas Javascript, analisador SVG para tela.
• Maker.js – Desenho de linha paramétrico para cortadores SVG, CNC e laser.
• OpenJSCAD – Modelagem 3D programática em JavaScript.
• Sketch.js – Estrutura mínima de codificação de criativos JavaScript.
• Two.js – API de desenho bidimensional voltada para navegadores da web modernos.
• ClayGL – Biblioteca gráfica WebGL para criar aplicativos Web3D escaláveis.
• Proton – Um mecanismo de partículas javascript leve e poderoso.
• lightgl.js – Uma biblioteca WebGL leve.
• picogl.js – Uma biblioteca de renderização mínima do WebGL 2.
• Alfrid – Um conjunto de ferramentas WebGL.
• Babylon.js – Estrutura JavaScript completa para criar jogos 3D com HTML 5 e WebGL.
• twigl – Uma pequena biblioteca auxiliar do WebGL.
• luma.gl – Componentes WebGL2 para visualização de dados.
• css-doodle – Um componente da web para desenhar padrões com CSS.

Mapeamento de Projeção • VJing

• MadMapper [Mac] – Projeções de mapeamento de vídeo e mapeamento de luz.
• VDMX [Mac] – Aplicativo de desempenho multimídia em tempo real.
• Modul8 [Mac] – Mistura e composição de vídeo em tempo real.
• Resolume [Mac, Win] – Mistura de vídeo e efeitos digitais em tempo real.
• CoGe VJ [Mac] – Software VJ projetado para mixagem e composição de vídeo HD em tempo real com uma interface de usuário modular.
• VirtualMapper – Ferramenta de visualização em tempo real para mapeamento de projeção.

Online

• Shadertoy – Crie e compartilhe shaders com o mundo e inspire-se.
• GLSLbin – Sandbox de fragmento de shader com suporte para glslify.
• GLSL Sandbox – Editor e galeria online de shader.
• Shdr Editor – Editor de sombreador online.
• CodePen – Mostrar caso de técnicas avançadas com código fonte editável.
• Shadershop – Interface para programação de shaders de GPU.
• Vertexshaderart – Editor e galeria online de shader.
• Cyos – Editor de sombreador online.
• GlslEditor – Editor de Shader de Fragmentos WebGL simples.
• OpenProcessing – Crie e experimente com design algorítmico, Processing e P5.js.
• P5.js Editor – Editor da web online para P5.js.
• LiveCodeLab – Ferramenta Executar como você digita para VJs, músicos, professores, alunos, crianças.
• Turtletoy – API minimalista e vitrine on-line para código generativo. (Javascript)
• ShaderGif – Página inicial de código aberto para obras de arte feitas com código (WebGL1 / 2, JavaScript Canvas e P5.js).
• P5LIVE – Ambiente de codificação ao vivo p5.js..
• NEORT – Plataforma de arte digital para codificadores criativos (Fragment Shader, Javascript Canvas).

Hardware

• Arduino – Kits de microcontroladores de código aberto para a construção de dispositivos digitais e objetos interativos.
• Raspberry Pi – Pequenos computadores de placa única.
• Puck.js – Microcontrolador JavaScript de código aberto que você pode programar sem fio.
• BeagleBoard – Computadores de placa única de fonte aberta de baixa potência.
• Makey Makey – Transforme objetos do cotidiano em touchpads e combine-os com a Internet.
• Tessel – Microcontrolador fácil de usar que executa JavaScript.
• Leap Motion – Dispositivo sensor que suporta movimentos de mãos e dedos como entrada.
• AxiDraw – Plotter de caneta simples, moderno e preciso.
• Phidgets – Sensores, dispositivos de entrada e controladores para computadores.

Outros

• Structure Synth [Cross-platform] – Aplicativo para gerar estruturas 3D especificando uma gramática de design.
• F3 [Mac] – Poderoso aplicativo de design 3D que permite viver o formulário 3D de código.
• Fragment [Mac]- App para códigos ao vivo de gráficos GLSL.
• ShaderTool [Win] – IDE shader moderno para programadores e artistas FX.
• Syphon [Mac] – Permite que os aplicativos compartilhem quadros um com o outro em tempo real.
• KodeLife – Editor de shader de GPU em tempo real, ferramenta de desempenho de código ao vivo e bloco de desenho de prototipagem de gráficos.
• ISF – Shaders GLSL para uso em aplicativos interativos.
• glslViewer – Ferramenta de console de codificação ao vivo que processa GLSL Shaders.
• DrawBot [Mac] – Ambiente de programação gráfica orientada para educação em 2D, baseado em python.
• Klak – Uma coleção de scripts para codificação criativa com o Unity.
• basil.js – Script (JS) no InDesign para designers e artistas, no espírito de Processamento.

RECURSOS DE APRENDIZAGEM EM FONTES DE ESTUDO E DESENVOLVIMENTO WEB

Vídeos

• The Coding Train – Daniel Shiffman faz vídeos sobre codificação criativa.
• MFGD – Fragment Shaders – Lista de reprodução do YouTube sobre shaders de fragmentos.
• Shaders Laboratory – Canal do YouTube sobre shaders.
• Makin’ Stuff Look Good – Canal do YouTube sobre estudos de caso de shaders.
• OpenFrameworks Tutorial Series – Série do YouTube para aprender openFrameworks
• openFrameworks tutorial – Lista de reprodução do YouTube sobre openFrameworks – não atualizada [2015].
• Shader Tutorial Series – Lista de reprodução do YouTube sobre Shaders, usando o Visual Studio Code.
• Kha Tutorial Series – Lista de reprodução do YouTube sobre a estrutura Kha, construída em Haxe.
• Fun with WebGL 2.0 – Lista de reprodução do YouTube sobre WebGL 2.0.
• Modern OpenGL 3.0+ Tutorials – Lista de reprodução do YouTube sobre o OpenGL moderno.
• Vertexshaderart – Lista de reprodução do YouTube sobre sombreadores de vértices.
• Diving in Three.js – Lista de reprodução do YouTube que mergulha no three.js.
• Shadertoy Tutorials – Lista de reprodução do YouTube ensinando você a fazer shaders, começando com zero conhecimento usando shadertoy.
• WebGL Lightning – Introdução ao WebGL Lightning com Greg Tatum.

Palestras

• Intro to WebGL Slides Video – Introdução ao WebGL com three.js.
• Inigo Quilez Live – Coleção de vídeos de codificação ao vivo por Íñigo Quílez.
• There is also canvas – Bruno Imbrizi passa pelo uso de canvas para codificação criativa no WebExpo 2016. Slides interativos aqui.
• Draw. Move. Fail. Repeat. – Slides de @williamapan do seu workshop de desenvolvedores criativos na Gobelins.
• OpenGL 3D Game Tutorials –
• How We Do This Shit – Fala sobre como os artistas baseados em tecnologia fazem isso financeiramente.
• Making WebGL Dance – Como eu aprendi a parar de se preocupar e amar álgebra linear.
• The Pixel Factory – Fala sobre WebGL, GPUs e matemática de Steven Wittens.
• Poetic Computation – Palestra inspiradora de Zach Lieberman.
• Generative Machines – Palestra do FITC por Matt DesLauriers sobre sua paixão pela arte generativa.

Artigos e Tutoriais

Shaders • OpenGL • WebGL

• Introduction to shaders – Parte 1 de uma introdução aos shaders usando three.js.
• Three.js 101 – Introdução ao three.js da perspectiva do codificador criativo.
• Experimenting with Three.js shaders and the ShaderMaterial – Introdução aos materiais de sombreamento de malha personalizados.
• lwjgl: Shaders – Tutorial de sombreador no contexto de lwjgl-basics.
• Shaders: A primer – Uma cartilha sobre shaders.
• Shaders: Second stage – A segunda parte da anterior.
• WebGL Lessons — Fragment Shaders – Uma breve introdução aos shaders de fragmentos.
• WebGL Lessons — ThreeJS Shaders – Utilizando sombreadores personalizados de vértice e fragmento no ThreeJS.
• ThreeJS post-proces example – exemplo de efeitos de pós-processamento no ThreeJS.
• Ray Marching and Signed Distance Functions – Introdução ao traçado de raios.
• Introduction to Ray Tracing – Um método simples para criar imagens 3D.
• GLSL lighting walkthrough – Tutorial de sombreamento Phong com glslify.
• Three glslify example – Exemplo de como usar o three.js com o glslify.
• WebGL Beyond Dom – Greg Tatum explica o básico do WebGL usando Regl.
• FBO particles – Artigo sobre partículas FBO / GPGPU da @nicoptere.
• Ray marching (with THREE.js) – Artigo sobre ray marching with three.js por @nicoptere.
• Custom shaders with Three.JS – Introdução aos shaders, uniformes, texturas e iluminação personalizados em three.js.
• An intro to modern OpenGL – Primeira parte de uma introdução ao OpenGL moderno.
• Modern OpenGL Series – Boa introdução a alguns dos termos do OpenGL.
• Smooth minimum – Artigo sobre a união primitiva com base suave.
• Modeling with distance functions – Coleção de funções de distância em um local centralizado.
• Volumetric rendering – Explica como criar formas 3D complexas dentro de shaders volumétricos.
• Real-time Rendering – Livro, blog e coleção de recursos relacionados à renderização em tempo real.
• OpenGL 4 Shaders – Breve e doce introdução aos shaders OpenGL de Anton Gerdelan.
• On ray casting, ray tracing, ray marching and the like – O título diz tudo. Introdução por Adok.
• Sun and Black Cat – Artigos sobre shaders e outros tópicos relacionados à computação gráfica.
• Writing a small software renderer – Realmente boa introdução sobre como a renderização básica de software funciona.
• WebGL Tutorials – Site com uma coleção realmente boa de tutoriais WebGL.
• Generating Geometry: 1, 2, 3 – Introdução para iniciantes sobre como criar objetos de geometria.
• Three.js sine animation – Aprenda a adicionar ondas senoidais a um círculo com three.js. (oF version)
• Into Vertex Shaders – Série de tutoriais sobre WebGL, Three.js e Three.bas.
• The Spaces of WebGL – Breve visão geral sobre os diferentes sistemas de coordenadas através do pipeline de gráficos 3D.
• WebGL Workshop – Introdução online curta e agradável ao WebGL.
• THREE.js & instanced geometry – Predador fofo com three.js e geometria instanciada.
• Particle Effects via Billboards – Como criar efeitos de partículas com outdoors e WebGL.
• Beautifully Animate Points with WebGL and regl – Como criar partículas GPGPU com regl.
• WebGL Tutorial: Directional Shadow Mapping without extensions – Introdução aos conceitos por trás do mapeamento direcional de sombras de luz em tempo real.
• WebGL Quest – Um tutorial e uma lista de recursos úteis para usar as funções de marcação a distância e distância do WebGL facilmente.
• Exploring bump mapping with WebGL – Introdução a diferentes técnicas de mapeamento de relevo.
• OpenGL/GLSL Shader Programing – Plataforma na programação de shader OpenGL / GLSL.
• Particles in a Simplex Noise Flow Field – Tutorial de campo de fluxo de ruído Perlin.
• Flow Fields, Part 1 Part 2 – Introdução aos campos de fluxo, também conhecidos como campos vetoriais.
• Graphics for Games – Introdução à programação gráfica 3D, incluindo shaders, pós-processamento de matemática, etc., da Universidade de Newcastle.
• Three.js Basics – Introdução ao Three.js por Eric Haines.
• An Interactive Introduction to WebGL and three.js – Slides do workshop SIGGRAPH 2017 WebGL.
• How to Start Learning Computer Graphics Programming – Dicas e conselhos sobre como começar por Eric Arnebäck.
• What Every Coder Should Know About Gamma – Mergulhe na importância da gama.

Canvas

• HTML Canvas Deep Dive – Introdução profunda à API do canvas.
• 31 days of Canvas tutorials – Coleção de tutoriais em tela por Seb Lee-Delisle.

Hardware

• Pen Plotter Art & Algorithms Part 1, 2 – Como usar a plotadora de caneta AxiDraw com JavaScript.

Outros

• Cat Like Coding – Tutoriais detalhados sobre matemática, algoritmos e Unity.
• Fun Programming – Aprenda codificação criativa escrevendo programas simples.
• Creative-coding on iOS with C4 – Introdução ao C4 publicado em Aplicativos Criativos.
• COSMOS – Um tutorial de ponta a ponta sobre o design, programação e lançamento de um aplicativo usando C4.
• Particle Physics – Um tutorial de ponta a ponta sobre o design, programação e lançamento de um aplicativo usando C4.
• Visualizing Algorithms – Analisa o uso da visualização para entender, explicar e depurar algoritmos.
• Adventures in Game Development World – Coleção fácil de entender sobre artigos sobre desenvolvimento de jogos, mas relevante para a codificação criativa.
• Shepherding random numbers – Minúsculo guia para pastorear números aleatórios.
• Amit’s Game Programming Information – Coleção de recursos em coisas como busca de caminhos, Ai, matemática etc.
• Tips to Improve Your Generative Artwork – Dicas para melhorar sua arte.
• Working With Color in Generative Art – Dicas sobre como obter a cor certa.

Interativos

• Shader-school – Workshop para shaders GLSL e programação gráfica.
• Webgl-workshop – A sequela da escola shader: Aprenda a API WebGL.
• Fragment-oundry – Tutorial de shader de fragmento interativo.
• SDF Tutorial 1: box & balloon – Tutorial de Shadertoy sobre raytracing.
• HOWTO: Ray Marching – Tutorial de Shadertoy sobre Ray Marching.
• Raymarch Tutorial2 – Tutorial do shadertoy raymarch.
• GLSL 2D Tutorials – Tutorial do Shadertoy GLSL 2D.
• Bubble Breakdown – Repartição de Shader por Perlin.
• Let’s Make A Ray Marcher – Interativo Shader-Toy para escrever um ray marcher.
• Raymarching – Tutorial interativo de raymarching do Shader-Toy.

Referências Rápidas e Dicas

• Shaderific GLSL – Referência de linguagem de sombreamento OpenGL ES.
• The Book of Shaders Glossary – Glossário de sombreador por tema.
• gltut glossary pages: 1, 2, 3, 4, 5, 6, 7, 8 – Glossário de programação 3D OpenGL.
• Canvas Cheatsheet – Cheatsheet de tela rápida e visual.
• WebGL Cheatsheet – Cartão de referência da API WebGL 1.0.
• Glossary of Computer Graphics – Glossário de termos relacionados a computação gráfica.
• GLSL Reference Guide – Guia de referência rápida do OpenGL Shading Language.
• 3D Maths Cheat Sheet -Cheatsheet em matemática de Anton Gerdelan, de seu livro OpenGL.
• docs.GL – Melhoria da documentação oficial do OpenGL.
• OpenGL Shading Language – Wiki GLSL do Grupo Khronos.
• OpenGL 4.3 Reference Card – Cartão de referência em PDF para a API OpenGL 4.3.
• Easings – Cheatsheet interativo das funções de facilitação.
• The newbie’s PBR Cheat Sheet – Visão geral curta e agradável da PBR.
• PixelSpirit – Biblioteca GLSL no verso das cartas de tarô, para aprendizado e referência.
• Procedural Patterns And Noises – Coleta de padrões e ruídos processuais.
• Three.js Reference – Referência do curso Udacity Interactive 3D Graphics.
• Visual Noises – Visualize algoritmos de ruído em 1D e 2D.
• Trigonoparty – Visualização simples de trigonometria.

COMUNIDADES DE FONTES DE ESTUDO E DESENVOLVIMENTO

Subreddits

• r/creativecoding – Compartilhar e discutir o uso da programação de computadores como disciplina criativa.
• r/raytraycing – Subreddit em raytracing.
• r/opengl – Notícias e discussões sobre o OpenGL em todas as plataformas.
• r/graphicsprogramming – Subreddit em programação gráfica.
• r/processing – Subreddit em Processamento.
• r/shaders – Subreddit em shaders.
• r/proceduralgeneration – Subreddit na geração procedural.
• r/MachineLearning – Subreddit em aprendizado de máquina.

Slack

• Creative-Dev Slack – Folga no Desenvolvimento Criativo.
• Generative Art Slack – Folga de arte generativa.
• Creative Coding Club – Slack do Clube de Codificação Criativa.
• Creative Coding – Folga de codificação criativa.
• openFrameworks – openFrameworks Slack.

Outros

• The Creative Coding Podcast – Iain e Seb discutem os meandros da codificação criativa.
• realtimevfx.com – Comunidade VFX em tempo real.
• Data Stories – Podcast sobre visualização de dados.
• 3D Programming Weekly Articles – Grande coleção de recursos relacionados a shader e matemática.

MATEMÁTICOS

• Math as code – Folha de dicas para notação matemática em forma de código.
• Coding Math – Ensina a matemática que você precisa entender como programador.
• Math snippets – Trechos de matemática com programação gráfica em mente.
• Formul Animations – Os princípios da pintura com matemática.
• Learning Maths again – Coleção de trechos de matemática JS e GLSL.
• Eases – Grab-bag de equações de flexibilização modulares.
• Math for Motion – Visualização de diferentes equações de movimento.
• Matrix Multiplication – Multiplicação de matrizes visualizada.
• Algebra rules – As regras mais úteis da álgebra básica.
• Immersive Math – Álgebra linear totalmente interativa.
• Image Kernels – Introdução interativa e visual aos kernels de imagem.
  Seno e cosseno – explicação interativa do seno e do cosseno.
• Perlin Noise – Ruído Perlin explicado em detalhes.
• Vector Math for 3D Computer Graphics – Tutorial sobre álgebra vetorial e álgebra matricial do ponto de vista da computação gráfica.
• Desmos – Representa graficamente funções, plota dados, avalia equações, explora transformações e muito mais.
• MFGD – Lista de reprodução do YouTube para desenvolvedores de jogos do YouTube.
• Essence of linear algebra – Essência da lista de reprodução do YouTube de álgebra linear.
• Mathematics of Animation – Slides sobre a matemática da animação (repo).
• Sketching with Math and Quasi Physics – Introdução bonita e visual à matemática e quase física.
• Gene Kogan: Perlin Noise – introdução ao ruído perlin 2D e 3D.
• Matrix Math and You – Introdução de alto nível às matrizes.
• Mathematical Symbols – Lista de todos os símbolos e sinais matemáticos.
• The magnificent 2d matrix – Ferramenta interativa para entender melhor as matrizes de transformação.
• Game Dev Movement cheatsheet with examples – Trechos de matemática JavaScript para movimento.
• Maths & trigonometry cheat sheet for 2D & 3D games – Dicas de matemática para criadores de jogos 2D e 3D.
• Tiny 3D – O menor mecanismo de perspectiva possível em uma tela 2D.
• Matrices for Creative Coding – Introdução às matrizes por Greg Tatum.
• Making Things With Maths – Fale por Steven Wittens sobre curvas de bezier, geração de procedimentos, motores de física e fractais.
• MyPhysicsLab – Simulações interativas de física em tempo real, com fórmulas e código.
• Intuitive Math – Explicações de campos como Álgebra Linear e Geometria projetados para ajudá-lo a desenvolver uma intuição visual para o que está acontecendo.
• L-systems – Um pacote Haskell para sistemas L.
• Linear Interpolation – Introdução à interpolação linear (também conhecida como mix / lerp).
• Practical use of Vector Math in Games – Artigo detalhado sobre vetores para matemática de jogos.

APRENDIZADO DE MÁQUINA – VISÃO COMPUTACIONAL – AI

• ml4a – Aprendizado de máquina para artistas.
• Keras.js – Execute os modelos Keras (back-end do tensorflow) no navegador, com suporte à GPU.
• Tesseract.js – OCR multilíngue de Javascript puro.
• Google ML – Aprendizado de máquina na nuvem pelo Google.
• TensorFlow – Biblioteca de software de código aberto para inteligência de máquina.
• ConvNetJS – Deep Learning no seu navegador.
• Wekinator – Permite que qualquer pessoa use o aprendizado de máquina.
• Machine Learning – Repo de trem de codificação com links para recursos de aprendizado de máquina.
• CreativeAi.net – Espaço para compartilhar projetos criativos de Ai.
• AI Playbook – Ai microsite destinado a ajudar os iniciantes a começar.
• Teachable Machine – Explore como o aprendizado de máquina funciona, viva no navegador.
• TensorFlow.js – Biblioteca JavaScript para treinar e implantar modelos de ML no navegador e no Node.js.
• Hello TensorFlow – Demonstração totalmente comentada do TensorFlow.js.
• ml5.js -Aprendizado de máquina amigável para a web.
• Model Zoo – Descubra código de aprendizado profundo de código aberto e modelos pré-treinados.
• Runway – Kit de ferramentas que adiciona recursos de inteligência artificial ao design e plataformas criativas.
• Lobe – Crie, treine e envie modelos personalizados de aprendizado profundo usando uma interface visual simples.
• ModelDepot – Plataforma para descobrir, compartilhar e discutir modelos de aprendizado de máquina fáceis de usar e pré-treinados.

INSPIRAÇÕES

• OpenProcessing – Projetos Algorítmicos Criados com Processing, p5js e processingjs.
• Dwitter – Rede social para demonstrações curtas de JavaScript.
• Chrome Experiments – Demonstração de experiências na Web escritas pela comunidade de codificação criativa.
• Codedoodl.es – Vitrine de esboços de codificação criativa com curadoria.
• For your Processing – Projetos e tutoriais sobre processamento.
• Art From Code – Esboços de código de Keith Peters.
• Generator.x – Grupo Flickr sobre estratégias generativas em arte e design.
• Generative Art – Grupo Flickr sobre arte generativa.
• Inspiring Online – Microblog de código aberto sobre trabalhos inspiradores e criativos publicados online.
• People You Should Follow on CodePen – Lista de pessoas interessantes que vale a pena seguir.
• Raven Kwok – Tumblr pelo artista visual Raven Kwok.
• P5Art – Realmente boa coleção de experimentos em processamento.
• Echophon – Tumblr com inspiração visual.
• Bees & Bombs – Tumblr com gifs de Dave.
• DevArt – Celebração de arte feita com código por artistas que empurram as possibilidades de criatividade.
• Folds2d – Tumblr com curvas, superfícies, campos escalares e vetoriais.
• W:BLUT Inspiration – Coleção de gifs, links e imagens por W: Blut.

EVENTOS

• OFFF Festival – Festival de design digital (Online Flash Film Festival).
• Resonate – Festival em Belgrado sobre música de ponta, artes visuais e cultura digital.
• Gray Area Festival – Festival criativo de codificação, arte e tecnologia.
• Signal Festival – Mostra de arte leve e tecnologias emergentes em Praga, República Tcheca.
• Eyeo Festival -Reúna codificadores criativos, designers de dados e criadores que trabalham na interseção de dados, arte e tecnologia.
• Mutek – Organização dedicada à criatividade digital em arte sonora, musical e audiovisual.
• Node – Uma plataforma aberta para o intercâmbio de cultura, artes e tecnologia.
• Digital Design Days – OFFF – Evento de 3 dias disponíveis, workshops, vídeos e instalações digitais.
• CODAME ART+TECH – Projetos e eventos sem fins lucrativos, para inspirar através da experiência.
• Curated Creative Events – Eventos escolhidos a dedo, código, arte, moda e criadores.
• NextArt Night – Inspirar pessoas através de usos criativos da tecnologia.
• GROW – O encontro parisiense de codificadores criativos, GROW, trata de abrir novas possibilidades na criação digital.

ESCOLAS E WORKSHOPS

• School for Poetic Computation – Escola em Nova York que explora as interseções de código, design, hardware e teoria.
• Copenhagen Institute of Interaction Design – Hospeda uma série de iniciativas educacionais, principalmente o Programa de Design de Interação e a Escola de Verão do CIID.
• Residencies, Fellowships, Summer Schools -Enorme lista de residências, bolsas de estudo e escolas de verão em todo o mundo (Navegue com as guias da parte inferior esquerda).

BLOGS E WEBSITES

• CreativeApplications.Net [CAN] – Blog de arte digital famoso.
• iquilezles.org – Casa de Íñigo Quílez, especializada em GLSL e trechos de matemática.
• bit-101.com – Blog de Keith Peters, especializado em codificação criativa.
• ibreakdownshaders – Explore a matemática por trás dos shaders.
• adriancourrèges.com – Blog do engenheiro de software Adrian Courrèges.
• clicktorelease.com – Casa de Jaume Sanchez Elias, com demos, palestras, artigos sobre WebGL e WebVR.
• syntopia – Blog sobre arte e sistemas generativos, de Mikael Hvidtfeldt Christensen.
• madebyevan.com – Experiências WebGL e artigos de Evan Wallace.
• songho.ca – Página inicial da Song Ho Ahn, com uma boa coleção de tutoriais sobre OpenGL e matemática.
• simonschreibt.de – Truques de arte do jogo, truques de design de Simon schreibt.
• sighack.com – Lista com curadoria de incríveis bibliotecas, depuradores e recursos OpenGL.

FONTES DE ESTUDO E DESENVOLVIMENTO RELACIONADOS

• Awesome opengl – Lista com curadoria de incríveis bibliotecas, depuradores e recursos OpenGL.
• Awesome webgl – Lista com curadoria de incríveis bibliotecas WebGL, recursos e muito mais.
• Awesome canvas – Lista com curadoria de telas HTML5 impressionantes, com exemplos, artigos e postagens relacionados.
• Awesome audio visualization – Lista com curadoria sobre Visualização de Áudio.
• Awesome computer vision – Lista com curadoria de recursos impressionantes de visão computacional.
• Awesome visualization research – Lista com curadoria de trabalhos de pesquisa recomendados e outras leituras sobre visualização de dados.
• Awesome livecoding – Lista com curadoria de idiomas e ferramentas de codificação ao vivo.
• Awesome graphics – Lista com curadoria de tutoriais e recursos de computação gráfica.
• Graphics resources – Lista com curadoria de recursos de programação gráfica.
• Magic tools – Lista selecionada de recursos de desenvolvimento de jogos para fazer mágica acontecer.
• Hanecci’s link collection – Vincule a coleção de marchas de raios na GPU.
• Awesome public datasets – Lista com curadoria de conjuntos de dados públicos disponíveis, principalmente recursos livres.
• Link collection of ray marching on the GPU – Lista com curadoria de 2013.
• 3D Machine Learning – Um repositório de recursos para aprendizado de máquina 3D.

IMPORTANTE: Me avise se por ventura algum link estiver quebrado ou não existir mais para eventual substituição, manutenção ou retirada do mesmo

Aliás, espero que tenha gostado dessa lista de links incríveis.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post Estudo e Desenvolvimento de Códigos Web apareceu primeiro em Web-Zoneware.

IFRAME – O que é e como usar

Saiba o que é e como usar a tag Iframe.

Faça uso de iframes de forma consciente.

NUNCA use conteúdo de terceiros sem autorização prévia!

O que é a Tag Iframe?

O IFRAME é um código HTML que pode ser usado, assim sendo, para mostrar um quadro (frame) de um objeto ou conteúdo de uma outra página, incorporando-a.

Ademais, abaixo está um exemplo simples de um iframe.

Utilize iframes para conteúdos como, por exemplo, externos, internos, propagandas e muitas outras utilidades. Porém, sempre respeitando o conteúdo alheio.

Portanto, utilize as boas práticas da internet para não ter problemas futuros.

Veja, por exemplo, o código inserido no corpo de um  documento HTML:

<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<-- Onde fica a tag IFRAME no corpo do documento HTML -->
<iframe src="https://economaster.com.br/" scrolling="no" width="100%" height="220px" frameborder="0"></iframe>
<-- Fim do IFRAME -->
</body>
</html>

Enfim, use adequadamente a tag IFRAME entre as tags BODY da sua página como no exemplo  abaixo:

Então veja e teste a implementação de iframes na janela abaixo:

See the Pen
Inserindo um Iframe by Flavio Estaiano (@flavio-estaiano)
on CodePen.

Veja alguns atributos da tag IFRAME

• src = pagina.html – Determina a página ou arquivo que será carregado na região correspondente.
• width=LARGURA – Especifica o largura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo: 100px ou uma percentagem do espaço a ser utilizado na página, como 85%.
• height=ALTURA – Especifica o altura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo 200px.
• frameborder=VALOR – Determina a espessura da linha divisória que aparece entre a página e o IFRAME. Sendo que x é o valor da linha em pixels.
• scrolling=VALOR – Determina se aparecerá barra de rolagem. Os valores podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de rolagem só aparecerá quando o conteúdo da página ultrapassar o tamanho do frameset).
• marginwidth=x – Determina a largura da margem horizontal. Usa-se valores em pixels. Ex: 10px.
• marginheight=x – Determina a largura da margem vertical. Usa-se valores em pixels. Ex: 5 px.
• vspace=x – Determina a área vertical entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels.
• hspace=x – Determina a área horizontal entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels.

Utilize o Gerador de Iframe!

Aliás, espero que tenha gostado desse artigo sobre Iframes.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post IFRAME – O que é e como usar apareceu primeiro em Web-Zoneware.