Teste

Gemfile.lock

@@ -9,6 +9,7 @@ GEM
     commander (4.1.6)
       highline (~> 1.6.11)
     fast-stemmer (1.0.2)
+    ffi (1.9.3)
     ffi (1.9.3-x64-mingw32)
     github-pages (15)
       RedCloth (= 4.2.9)
@@ -56,7 +57,11 @@ GEM
     yajl-ruby (1.1.0)
 
 PLATFORMS
+  ruby
   x64-mingw32
 
 DEPENDENCIES
   github-pages
+
+BUNDLED WITH
+   1.10.6

_includes/submenu-js.html

@@ -6,6 +6,7 @@ <h3><a href="#menu-js">JavaScript</a></h3>
     <li><a href="variaveis.html">Variáveis</a></li>
     <li><a href="operadores.html">Operadores</a></li>
     <li><a href="funcoes.html">Funções</a></li>
+    <li><a href="controles-de-fluxo-e-controles-de-repeticao.html">Controles de Fluxo e Controles de Repetição</a></li>
     <li><a href="arrays.html">Arrays</a></li>
     <li><a href="objetos.html">Objetos</a></li>
     <li><a href="o-que-framework.html">O que é um framework?</a></li>

assets/javascripts/scripts.js

@@ -1,3 +1,11 @@
 $(document).ready(function(){
   prettyPrint();
+
+  // Altera links externos para abrirem em uma nova aba
+  var domain = document.location.protocol+'//'+document.location.host,
+    links = $('.content a').each(function(index,element) {
+    if(element.href.substr(0,domain.length) !== domain) {
+      element.target = '_blank';
+    }
+  });
 });

manual/css/box-model.html

@@ -40,7 +40,7 @@ <h2>Entendendo como funciona elementos no HTML</h2>
 
   <dl>
     <dt>Altura</dt>
-    <dd><p><strong>50</strong> (largura definida) + <br><strong>10</strong> (padding top) + <br><strong>10</strong> (padding bottom) + <br><strong>1</strong> (border top) + <br><strong>1</strong> (border bottom) => <strong>72</strong> pixels de altura</p></dd>
+    <dd><p><strong>50</strong> (altura definida) + <br><strong>10</strong> (padding top) + <br><strong>10</strong> (padding bottom) + <br><strong>1</strong> (border top) + <br><strong>1</strong> (border bottom) => <strong>72</strong> pixels de altura</p></dd>
   </dl>
 
   <p>Um exemplo prático pra vermos a dor de cabeça que você pode ter no seu dia a dia. Imagine que você precise ter um elemento que ocupe 100% da largura disponível. Mas também precisa que esse elemento tenha <i>10 pixels</i> de <i>padding</i> e uma borda de <i>1 pixel</i>.</p>

manual/css/float-clear.html

@@ -62,7 +62,7 @@ <h3>A propriedade <i>clear</i></h3>
 <p>No entanto, chegaríamos num resultado assim:</p>
 <img src="/iniciantes/assets/img/exemplo-sem-clear.png" alt="Representação de um layout com imagem localizada no topo esquerdo com conteúdo textual ao redor dela">
 <p>Por que isso? Como definimos que a tag <code>figure</code> flutuaria à esquerda, saindo assim do fluxo vertical da página, todo conteúdo que vem após ela começa a preencher o espaço ao redor da imagem. O que acontece é que os parágrafos que vem logo após a tag <code>figure</code> são menores que a altura da imagem, fazendo com que o título (tag <code>h3</code>) ao invés de ser renderizada abaixo da imagem, apareça ao lado dela e seguindo o fluxo do documento.</p>
-<p>É aí que entra a propriedade <i>clear</i>. Ela tem a função de controlar o comportamento de elementos que apareçam no fluxo do documento após determinado elemento que possue a propriedade <i>float</i>. Em outras palavras, ela especifica se um elemento deve ser posicionado ao de elementos com <i>float</i> ou se devem ser colocados abaixo deles. A propriedade aceita 4 valores: </p>
+<p>É aí que entra a propriedade <i>clear</i>. Ela tem a função de controlar o comportamento de elementos que apareçam no fluxo do documento após determinado elemento que possue a propriedade <i>float</i>. Em outras palavras, ela especifica se um elemento deve ser posicionado ao lado de elementos com <i>float</i> ou se devem ser colocados abaixo deles. A propriedade aceita 4 valores: </p>
 <ul>
   <li><b>left</b>: Elemento é empurrado para baixo de elementos com <i>float left</i>;</li>
   <li><b>right</b>: Elemento é empurrado para baixo de elementos com <i>float right</i>;</li>

manual/css/font.html

@@ -7,5 +7,25 @@
 <article class="content">
   <h1>Propriedade Font</h1>
   <h2>Formatando fonts de texto</h2>
+  <p>A font trata das caracteristicas de todos os textos do site. Ela pode ser aplicada diretamente ao elemento <i>body</i> e por consequência todos os elementos filhos herdarão esta propriedade.</p>
+  <p>As propriedades da font são:</p>
+  <dl>
+    <dt>family</dt>
+    <dd>
+      <p>Determina a familia da font a ser usada. Existem dois tipos básicos: as <b>famílias</b> e as <b>famílias genéricas</b></p>
+      <p>As famílias genéricas podem ser três:</p>
+      <ul>
+        <li><b>serif</b>: Font com serifa.</li>
+        <li><b>sans-serif</b>: Font sem serifa.</li>
+        <li><b>monoespace</b>: Font com a mesma largura em todos os caracteres.</li>
+      </ul>
+      <p><i>Serifa</i> nada mais é do que aquelas pontinhas que tem em algumas fontes tipo Times, ou seja, Times é uma font com serifa e Arial é uma font sem serifa.</p>
+      <pre class="lang-css prettyprint linenums">
+      div {
+        font-family: "Times New Roman", Times, serif;;
+      }
+      </pre>
+      <p>Entre aspas vai o nome da font, seguido da familia (Times) e depois da família genérica (serif).</p>
+    </dd>
   <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
 </article>

manual/html/estruturabasica.html

@@ -30,10 +30,10 @@ <h2>Iniciando o código básico de HTML</h2>
   </ul>
   <h3>Doctype - Definindo o documento</h3>
   <p>Uma coisa importante: SEMPRE deve existir o doctype, que é este código <code>&lt;!DOCTYPE html&gt;</code>.</p>
-  <p>O doctype indica para o navegador e outros programas que podem ler seu site, que o código encontrado ali é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.</p>
+  <p>O doctype não é uma tag HTML, mas uma instrução para o navegador e outros programas que podem ler seu site, que o código encontrado ali é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.</p>
 
   <h3>HEAD</h3>
-  <p>Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento dag <code>head</code>.</p>
+  <p>Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento tag <code>head</code>.</p>
 
   <h3>BODY</h3>
   <p>Trata-se do documento em si, ou seja, a informação legível para o usuário/leitor do documento. É todo e qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, miniaplicativos embutidos, conteúdo multimídia, etc). Além disso, toda a apresentação de entrada de dados (formulários) também se aplica neste seção do documento. Na prática, o corpo do documento é delimitado pelo par de tags <code>&lt;body&gt;</code> e <code>&lt;/body&gt;</code>.</p>

manual/html/index.html

@@ -19,7 +19,7 @@ <h2>Camadas de desenvolvimento</h2>
 
   <h2>O nome HTML</h2>
   <p>
-    O acrônico HTML significa em inglês: HyperText Marckup Language. Para gente aqui fica: Linguagem de Marcação de Hipertexto. Bonito, né?<br>
+    O acrônico HTML significa em inglês: HyperText Markup Language. Para gente aqui fica: Linguagem de Marcação de Hipertexto. Bonito, né?<br>
     Por trás das palavras <strong>Hipertexto</strong> e <strong>Marcação</strong> tem muita história e guardam a real essência da função do HTML. Você vai saber mais na próxima página, onde falamos sobre Semântica, que nada mais é do que a organização da informação usando HTML.
   </p>
   <p>Se você tiver que guardar alguma coisa sobre o que é HTML, guarde isso: <em>HTML serve para dar significado e organizar a informação dos websites.</em>

manual/html/oquemetatags.html

@@ -7,8 +7,9 @@
 <article class="content">
   <h1>O que são metatags?</h1>
   <h2>Informação sobre seu site</h2>
-    <p>A <strong>Meta Tag</strong>, representada pela tag &lt;meta&gt; é uma tag diferenciada das demais por não ter nenhum efeito aparente na página em si, mas sim por ser responsável por ações externas à página, como por exemplo informar à buscadores como Google ou Bing algumas informações a respeito da página, como título e uma breve descrição.</p>
-    <h2>Tipos de Meta Tags</h2>
+  <p>A <strong>Meta Tag</strong>, representada pela tag &lt;meta&gt; é uma tag diferenciada das demais por não ter nenhum efeito aparente na página em si, mas sim por ser responsável por ações externas à página, como por exemplo informar à buscadores como Google ou Bing algumas informações a respeito da página, como título e uma breve descrição.</p>
+  <h2>Tipos de Meta Tags</h2>
+  <dl>
     <dt>Author</dt>
     <dd><p>O nome do autor da página.</p></dd>
     <dt>Copyright</dt>
@@ -19,6 +20,6 @@ <h2>Tipos de Meta Tags</h2>
     <dd><p>Data em que o documento deve ser considerado expirado.</p></dd>
     <dt>Keywords</dt>
     <dd><p>Aqui é um dos locais onde os motores de busca procuram informações a respeito da página.</p></dd>
-    
+  </dl>
   <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
 </article>

manual/js/controles-de-fluxo-e-controles-de-repeticao.html

@@ -0,0 +1,149 @@
+---
+layout: interna
+title: Controles de Fluxo e Controles de Repetição
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>Declarações (Statements)</h1>
+  <h2>Entendendo Controles de Fluxo e Controles de Repetição</h2>
+
+  <h2>Controles de Fluxo</h2>
+  <p>São comandos da linguagem que permitem desviar o fluxo do programa, dependendo de um teste.</p>
+
+  <h3>IF</h3>
+  <p>A sintaxe do if é a seguinte:</p>
+<pre class="lang-javascript linenums prettyprint">
+if (&lt;teste>) {
+  &lt;código a ser executado caso o teste seja verdadeiro>
+}
+</pre>
+
+  <p>Podemos, por exemplo, executar um trecho do código unicamente se uma variavel nossa for maior do que dez.</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = 11;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+}
+</pre>
+
+  <p>Note, que o console.log não apareceria caso o valor de x fosse 10, 9, 8...</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = 9;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+}
+console.log('Serei executado independente do if ser true ou false');
+</pre>
+
+  <h3>ELSE</h3>
+  <p>o else não existe sem o if, pois ele não testa nada. Só é executado caso o teste do if retorne falso.</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = 9;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+} else {
+  console.log('Está tudo bem, podemos ficar tranquilos.');
+}
+</pre>
+
+  <h3>SWITCH</h3>
+  <p>O switch é uma estrutura para testes simples, muito usado quando temos que testar uma mesma condição diversas vezes, pois é mais legível do que uma cadeia de else if.</p>
+<pre class="lang-javascript linenums prettyprint">
+var tinta = 'azul';
+switch (tinta) {
+  case 'azul':
+    console.log('Irei pintar o carro de azul');
+    break;
+  case 'amarela':
+    console.log('Vou pintar a casa de amarelo');
+    break;
+  case 'verde':
+    console.log('Vou pintar o chão da garagem de verde');
+    break;
+  default:
+    console.log('Não vou pintar nada');
+    break;
+}
+</pre>
+
+  <p>Note que para cada uma das cores, eu farei uma coisa completamente diferente da outra. Caso a tinta seja verde, eu vou pintar o chão da garagem, mas se a tinha for amarela, irei pintar a casa.</p>
+
+  <p>Se fossemos reescrever esses testes com elseif, ficaria assim:</p>
+<pre class="lang-javascript linenums prettyprint">
+var tinta = 'azul';
+
+if (tinta === 'azul') {
+  console.log('Irei pintar o carro de azul');
+} else if(tinta === 'amarela') {
+  console.log('Vou pintar a casa de amarelo');
+} else if (tinta === 'verde') {
+  console.log('Vou pintar o chão da garagem de verde');
+} else {
+  console.log('Não vou pintar nada');
+}
+</pre>
+  <p>Fica melhor com o switch, ne?!</p>
+
+  <h2>Laços de repetição (loops)</h2>
+  <p>Se existe uma coisa que os computadores são muito bons é em executar algo várias vezes. Desde que saibamos o que queremos que o computador faça. Felizmente, para não precisamos repetir inúmeras vezes a invocação de uma função ou certo código, existe os loops (laços de repetição).</p>
+
+  <h3>FOR</h3>
+  <p>Formado por três partes: inicialização, condição e incremento. A sintaxe é:</p>
+<pre class="lang-javascript linenums prettyprint">
+for (var i = 0; i &lt;= 10; i++) {
+  //código a ser executado até a condição se tornar falsa
+}
+</pre>
+
+  <h3>FOR IN</h3>
+  <p>É utilizado quando não sabemos quantas vezes temos que interar sobre um array ou objeto.</p>
+<pre class="lang-javascript linenums prettyprint">
+var arr = [1,2,3];
+for(var n in arr) {
+  console.log(n);
+}
+</pre>
+
+  <h3>FOREACH</h3>
+  <p>Utilizamos o <code>foreach</code> quando queremos percorrer as propriedades de um objeto ou os itens de um array, sem precisamos nos preocupar em contar quantos são.</p>
+<pre class="lang-javascript linenums prettyprint">
+var arr = [1,2,3];
+arr.forEach(function(each){
+  console.log(each);
+});
+</pre>
+
+  <h3>WHILE</h3>
+  <p>Funciona basicamente igual ao for, e é possível sempre trocar o for() por um while(). Escolhemos um ou outro pela clareza do que estamos fazendo. Geralmente preferimos utilizar o loop for() para interar com contadores e loops while() até que alguma condição mude (de true para false, por exemplo).</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = true;
+while(x) {
+  console.log('Jane Doe');
+  x = false;
+}
+</pre>
+
+  <p>Nesse caso acima, o console.log será executado uma única vez, pois eu altero para false a variavel x, logo na primeira interação do laço. Mas eu poderia ter feito algo assim:</p>
+<pre class="lang-javascript linenums prettyprint">
+var i = 1,
+    x = 2;
+
+while(x &lt; 20) {
+  x = x + (x * i);
+
+  console.log('O valor atual de x é: ' + x);
+  i++;
+}
+</pre>
+
+  <h3>DO WHILE</h3>
+  <p>Segue o mesmo princípio do while, mas o corpo é sempre executado pelo menos uma vez, independente da condição, pois primeiro ele faz <b>do</b> e depois testa a condição.</p>
+<pre class="lang-javascript linenums prettyprint">
+do {
+  console.log('Jane Doe');
+} while(false);
+</pre>
+  <p>Apesar da condição já começar como falsa, veremos a string "Jane Doe" uma vez no console do browser.</p>
+
+</article>