├── Gemfile ├── _layouts ├── base.html └── interna.html ├── assets ├── img │ ├── arrow-menu.png │ ├── arvore-dom.gif │ ├── box-model.png │ ├── float-left.png │ ├── float-right.png │ ├── exemplo-sem-clear.png │ ├── exemplo-sem-float.png │ ├── propriedade-clear.png │ ├── box-model-border-box.png │ ├── box-model-content-box.png │ └── client-side-back-end.png ├── javascripts │ ├── scripts.js │ └── prettify │ │ ├── src │ │ ├── prettycss.css │ │ ├── lang-yaml.js │ │ ├── lang-proto.js │ │ ├── prettify.css │ │ ├── lang-tex.js │ │ ├── lang-wiki.js │ │ ├── lang-vhdl.js │ │ ├── lang-go.js │ │ ├── lang-lua.js │ │ ├── lang-scala.js │ │ ├── lang-apollo.js │ │ ├── lang-clj.js │ │ ├── lang-css.js │ │ ├── lang-ml.js │ │ ├── lang-n.js │ │ ├── lang-sql.js │ │ ├── lang-vb.js │ │ ├── lang-lisp.js │ │ └── lang-hs.js │ │ └── js-modules │ │ ├── externs.js │ │ ├── regexpPrecederPatterns.pl │ │ ├── extractSourceSpans.js │ │ ├── recombineTagsAndDecorations.js │ │ ├── recombineTagsAndDecorations_test.html │ │ ├── numberLines_test.html │ │ ├── extractSourceSpans_test.html │ │ └── numberLines.js └── stylesheets │ └── smallscreens.css ├── slide ├── css │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ └── lte-ie7.js │ ├── gallery-sass │ │ ├── gallery.build.scss │ │ ├── _variables.scss │ │ ├── gallery.theme.scss │ │ ├── gallery.css │ │ └── _gallery.scss │ ├── gallery │ │ └── gallery.theme.css │ ├── style.css │ └── functional-classes.css ├── img │ └── logo-tableless.png ├── layout │ └── layout-base.ai └── js │ └── script.js ├── .gitignore ├── .editorconfig ├── manual ├── obasico │ ├── index.html │ ├── oquew3c.html │ ├── oquedom.html │ ├── desenvolvimentocamadas.html │ └── o-que-front-back.html ├── html │ ├── oquemetatags.html │ ├── index.html │ ├── estruturabasica.html │ ├── oquesemantica.html │ └── oquetags.html ├── css │ ├── overflow.html │ ├── position.html │ ├── font.html │ ├── sintaxe-css.html │ ├── inserindo-css.html │ ├── seletores.html │ ├── display.html │ ├── class-id.html │ ├── index.html │ ├── seletores-complexos.html │ ├── margin-padding.html │ ├── background.html │ ├── box-model.html │ └── float-clear.html └── js │ ├── o-que-framework.html │ ├── o-que-jquery.html │ ├── arrays.html │ ├── inserindo-js.html │ ├── funcoes.html │ ├── operadores.html │ ├── index.html │ └── controles-de-fluxo-e-controles-de-repeticao.html ├── _includes ├── submenu-obasico.html ├── submenu-html.html ├── submenu-js.html ├── footer.html ├── submenu-css.html └── header.html ├── _config.yml ├── index.html └── README.md /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'github-pages', group: :jekyll_plugins 4 | -------------------------------------------------------------------------------- /_layouts/base.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 | 3 | {{content}} 4 | 5 | {% include footer.html %} 6 | -------------------------------------------------------------------------------- /assets/img/arrow-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/arrow-menu.png -------------------------------------------------------------------------------- /assets/img/arvore-dom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/arvore-dom.gif -------------------------------------------------------------------------------- /assets/img/box-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/box-model.png -------------------------------------------------------------------------------- /assets/img/float-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/float-left.png -------------------------------------------------------------------------------- /assets/img/float-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/float-right.png -------------------------------------------------------------------------------- /slide/css/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/slide/css/fonts/icomoon.eot -------------------------------------------------------------------------------- /slide/css/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/slide/css/fonts/icomoon.ttf -------------------------------------------------------------------------------- /slide/css/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/slide/css/fonts/icomoon.woff -------------------------------------------------------------------------------- /slide/img/logo-tableless.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/slide/img/logo-tableless.png -------------------------------------------------------------------------------- /slide/layout/layout-base.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/slide/layout/layout-base.ai -------------------------------------------------------------------------------- /assets/img/exemplo-sem-clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/exemplo-sem-clear.png -------------------------------------------------------------------------------- /assets/img/exemplo-sem-float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/exemplo-sem-float.png -------------------------------------------------------------------------------- /assets/img/propriedade-clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/propriedade-clear.png -------------------------------------------------------------------------------- /assets/img/box-model-border-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/box-model-border-box.png -------------------------------------------------------------------------------- /assets/img/box-model-content-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/box-model-content-box.png -------------------------------------------------------------------------------- /assets/img/client-side-back-end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tableless/iniciantes/HEAD/assets/img/client-side-back-end.png -------------------------------------------------------------------------------- /slide/css/gallery-sass/gallery.build.scss: -------------------------------------------------------------------------------- 1 | @import "gallery"; 2 | 3 | @for $i from 2 through 5 { 4 | @include gallery($i); 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | css/fonts/.DS_Store 3 | 4 | .DS_Store 5 | 6 | *.scssc 7 | *.sublime-project 8 | 9 | _site/ 10 | _site/* 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /_layouts/interna.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 | 3 |
4 | 7 | 8 | {{content}} 9 |
10 | 11 | {% include footer.html %} 12 | -------------------------------------------------------------------------------- /assets/javascripts/scripts.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | prettyPrint(); 3 | 4 | // Altera links externos para abrirem em uma nova aba 5 | var domain = document.location.protocol+'//'+document.location.host, 6 | links = $('.content a').each(function(index,element) { 7 | if(element.href.substr(0,domain.length) !== domain) { 8 | element.target = '_blank'; 9 | } 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /manual/obasico/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O Básico 4 | --- 5 | {% include submenu-obasico.html %} 6 | 7 |
8 |

O básico

9 |

Informações básicas e importantíssimas para você não se perder no caminho.

10 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

11 |
12 | -------------------------------------------------------------------------------- /slide/css/gallery-sass/_variables.scss: -------------------------------------------------------------------------------- 1 | $item-display-duration: 5 !default; //seconds 2 | $transition-duration: 2 !default; // seconds 3 | $display-duration: $transition-duration + $item-display-duration; 4 | 5 | @mixin inactive-button { color: #ccc; color: rgba(0, 0, 0, .3); } 6 | @mixin active-button { color: white; color: rgba(0, 0, 0, .7); } 7 | 8 | %inactive-button { @include inactive-button; } 9 | %active-button { @include active-button; } -------------------------------------------------------------------------------- /_includes/submenu-obasico.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /_includes/submenu-html.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /slide/css/gallery-sass/gallery.theme.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | /* 4 | Theme controls how everything looks in Gallery CSS. 5 | */ 6 | 7 | .gallery { 8 | position: relative; 9 | height: 100%; 10 | 11 | .item { height: 100%; overflow: hidden; text-align: center; display: table; vertical-align: middle;} 12 | .controls { position: absolute; bottom: 10%; width: 100%; text-align: center; } 13 | 14 | .control-button { 15 | display: inline-block; margin: 0 .02em; 16 | font-size: 3em; 17 | 18 | @extend %inactive-button; 19 | 20 | text-align: center; text-decoration: none; 21 | transition: color .1s; 22 | 23 | &:hover { @extend %active-button; } 24 | } 25 | } -------------------------------------------------------------------------------- /slide/css/gallery-sass/gallery.css: -------------------------------------------------------------------------------- 1 | .gallery .control-operator:target ~ .controls .control-button { 2 | color: #ccc; 3 | color: rgba(255, 255, 255, 0.4); } 4 | 5 | .gallery .control-button:first-of-type { 6 | color: white; 7 | color: rgba(255, 255, 255, 0.8); } 8 | 9 | .gallery .item:first-of-type { 10 | position: static; 11 | opacity: 1; } 12 | .gallery .item { 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | width: 100%; 17 | height: 100%; 18 | opacity: 0; 19 | transition: opacity .5s; } 20 | .gallery .control-operator { 21 | display: none; } 22 | .gallery .control-operator:target ~ .item { 23 | pointer-events: none; 24 | opacity: 0; 25 | animation: none; } 26 | .gallery .control-operator:target ~ .controls .control-button { 27 | animation: none; } 28 | -------------------------------------------------------------------------------- /_includes/submenu-js.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /slide/css/gallery/gallery.theme.css: -------------------------------------------------------------------------------- 1 | .gallery .control-button { 2 | color: #ccc; 3 | color: rgba(0, 0, 0, 0.3); } 4 | 5 | .gallery .control-button:hover { 6 | color: white; 7 | color: rgba(0, 0, 0, 0.7); } 8 | 9 | /* 10 | Theme controls how everything looks in Gallery CSS. 11 | */ 12 | .gallery { 13 | position: relative; 14 | height: 100%; } 15 | .gallery .item { 16 | height: 100%; 17 | overflow: hidden; 18 | text-align: center; 19 | display: table; 20 | vertical-align: middle; } 21 | .gallery .controls { 22 | position: absolute; 23 | bottom: 10%; 24 | width: 100%; 25 | text-align: center; } 26 | .gallery .control-button { 27 | display: inline-block; 28 | margin: 0 .02em; 29 | font-size: 3em; 30 | text-align: center; 31 | text-decoration: none; 32 | transition: color .1s; } 33 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/prettycss.css: -------------------------------------------------------------------------------- 1 | .com { color: #93a1a1; } 2 | .lit { color: #195f91; } 3 | .pun, .opn, .clo { color: #93a1a1; } 4 | .fun { color: #dc322f; } 5 | .str, .atv { color: #D14; } 6 | .kwd, .prettyprint .tag { color: #1e347b; } 7 | .typ, .atn, .dec, .var { color: teal; } 8 | .pln { color: #48484c; } 9 | 10 | .prettyprint { 11 | padding: 8px; 12 | background-color: #f7f7f9; 13 | border: 1px solid #e1e1e8; 14 | } 15 | .prettyprint.linenums { 16 | -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 17 | -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 18 | box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 19 | } 20 | 21 | /* Specify class=linenums on a pre to get line numbering */ 22 | ol.linenums { 23 | margin: 0 0 0 33px; /* IE indents via margin-left */ 24 | } 25 | ol.linenums li { 26 | padding-left: 12px; 27 | color: #bebec5; 28 | line-height: 20px; 29 | text-shadow: 0 1px 0 #fff; 30 | } -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-yaml.js: -------------------------------------------------------------------------------- 1 | // Contributed by ribrdb @ code.google.com 2 | 3 | /** 4 | * @fileoverview 5 | * Registers a language handler for YAML. 6 | * 7 | * @author ribrdb 8 | */ 9 | 10 | PR['registerLangHandler']( 11 | PR['createSimpleLexer']( 12 | [ 13 | [PR['PR_PUNCTUATION'], /^[:|>?]+/, null, ':|>?'], 14 | [PR['PR_DECLARATION'], /^%(?:YAML|TAG)[^#\r\n]+/, null, '%'], 15 | [PR['PR_TYPE'], /^[&]\S+/, null, '&'], 16 | [PR['PR_TYPE'], /^!\S*/, null, '!'], 17 | [PR['PR_STRING'], /^"(?:[^\\"]|\\.)*(?:"|$)/, null, '"'], 18 | [PR['PR_STRING'], /^'(?:[^']|'')*(?:'|$)/, null, "'"], 19 | [PR['PR_COMMENT'], /^#[^\r\n]*/, null, '#'], 20 | [PR['PR_PLAIN'], /^\s+/, null, ' \t\r\n'] 21 | ], 22 | [ 23 | [PR['PR_DECLARATION'], /^(?:---|\.\.\.)(?:[\r\n]|$)/], 24 | [PR['PR_PUNCTUATION'], /^-/], 25 | [PR['PR_KEYWORD'], /^\w+:[ \r\n]/], 26 | [PR['PR_PLAIN'], /^\w+/] 27 | ]), ['yaml', 'yml']); 28 | -------------------------------------------------------------------------------- /_includes/submenu-css.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/js-modules/externs.js: -------------------------------------------------------------------------------- 1 | var PR = {}; 2 | 3 | /** 4 | * @param {function (Object)} handler 5 | * @param {Array.} fileExtensions 6 | */ 7 | PR.registerLangHandler = function registerLangHandler(handler, fileExtensions) {}; 8 | 9 | /** 10 | * @param {Array} shortcutStylePatterns 11 | * @param {Array} fallthroughStylePatterns 12 | * @return {function (Object)} 13 | */ 14 | PR.createSimpleLexer = function createSimpleLexer( 15 | shortcutStylePatterns, fallthroughStylePatterns) {}; 16 | 17 | /** 18 | * @param {Object} options a set of optional parameters. 19 | * @return {function (Object)} a function that examines the source code 20 | * in the input job and builds the decoration list. 21 | */ 22 | PR.sourceDecorator = function sourceDecorator(options) {}; 23 | 24 | 25 | PR.PR_ATTRIB_NAME = 'atn'; 26 | PR.PR_ATTRIB_VALUE = 'atv'; 27 | PR.PR_COMMENT = 'com'; 28 | PR.PR_DECLARATION = 'dec'; 29 | PR.PR_KEYWORD = 'kwd'; 30 | PR.PR_LITERAL = 'lit'; 31 | PR.PR_NOCODE = 'nocode'; 32 | PR.PR_PLAIN = 'pln'; 33 | PR.PR_PUNCTUATION = 'pun'; 34 | PR.PR_SOURCE = 'src'; 35 | PR.PR_STRING = 'str'; 36 | PR.PR_TAG = 'tag'; 37 | PR.PR_TYPE = 'typ'; 38 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Para iniciantes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Fork me on GitHub 15 | 16 |
17 |
18 |

Getting Started

19 |

Um guia para iniciantes na área de web.

20 |
21 |
22 | -------------------------------------------------------------------------------- /manual/html/oquemetatags.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que são metatags? 4 | --- 5 | {% include submenu-html.html %} 6 | 7 |
8 |

O que são metatags?

9 |

Informação sobre seu site

10 |

A Meta Tag, representada pela tag <meta> é 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.

11 |

Tipos de Meta Tags

12 |
13 |
Author
14 |

O nome do autor da página.

15 |
Copyright
16 |

Direito autoral da página.

17 |
Description
18 |

Descrição da página.

19 |
Expires
20 |

Data em que o documento deve ser considerado expirado.

21 |
Keywords
22 |

Aqui é um dos locais onde os motores de busca procuram informações a respeito da página.

23 |
24 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

25 |
26 | -------------------------------------------------------------------------------- /manual/css/overflow.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Propriedade Overflow 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

Propriedade Overflow

9 |

Cuidando dos limites de conteúdo em caixas

10 | 11 |

A propriedade overflow define o comportamento de um elemento quando suas dimensões são excedidas pelo conteúdo.

12 |

Os valores possíveis dessa propriedade são os seguintes:

13 | 14 |

visible

15 |

É o valor padrão e define que o conteúdo não será cortado se exceder o tamanho do elemento.

16 | 17 |

hidden

18 |

O conteúdo excedido não ficará visível.

19 | 20 |

scroll

21 |

O conteúdo excedido será cortado mas haverá uma barra de rolagem para permitir a visualização completa do mesmo.

22 | 23 |

auto

24 |

A barra de rolagem será adicionada automaticamente se o conteúdo exceder o tamanho do elemento.

25 | 26 |

initial

27 |

Ajusta a propriedade para o valor padrão.

28 | 29 |

inherit

30 |

Herda a propriedade do elemento pai.

31 | 32 |
33 | 34 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

35 |
36 | -------------------------------------------------------------------------------- /manual/css/position.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Propriedade Position 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

Propriedade Position

9 |

Posicionando elementos via coordenadas

10 |

Determina a posição do elemento.

11 |

Possíveis valores:

12 |
13 |
relative
14 |
15 |

A posição do elemento é relativa ao elemento anterior.

16 | 
17 | aside {
18 |   position: relative;
19 | }
20 |
21 |
22 | 23 |
fixed
24 |
25 |

A posição do elemento é relativa ao viewport. Esta posição não é influenciada pela rolagem da página.

26 | 
27 | aside {
28 |   position: fixed;
29 | }
30 |
31 |
32 | 33 |
absolute
34 |
35 |

A posição do elemento é relativa ao viewport, ou ao elemento pai quando este tem um position definido. Esta posição é influenciada pela rolagem da página.

36 | 
37 | aside {
38 |   position: absolute;
39 | }
40 |
41 |
42 |
43 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

44 |
45 | -------------------------------------------------------------------------------- /assets/stylesheets/smallscreens.css: -------------------------------------------------------------------------------- 1 | .lnk-fork { 2 | display: none; 3 | } 4 | 5 | .limit { 6 | width: 90%; 7 | margin: 0 auto; 8 | } 9 | 10 | .box { 11 | display: block; 12 | width: 100%; 13 | margin: 0 auto 20px; 14 | } 15 | .box:nth-child(even) {margin: 0 auto 20px;} 16 | 17 | .box:before { 18 | padding: 20px 0; 19 | font-size: 2em; 20 | } 21 | 22 | .box h1 { 23 | font-size: 1em; 24 | } 25 | 26 | .box p { 27 | padding: 10px 10px 7px; 28 | line-height: 20px; 29 | font-size: 1em; 30 | } 31 | 32 | 33 | /***** 34 | ****** SIDEBAR 35 | *****/ 36 | .sidebar { 37 | float: none; 38 | margin-right: 20px; 39 | position: relative; 40 | top: -70px; 41 | } 42 | 43 | .navside { 44 | margin-right: 0; 45 | margin-bottom: 20px; 46 | float: none; 47 | clear: left; 48 | width: 100%; 49 | } 50 | 51 | 52 | 53 | .navside ul {position: absolute; top: -1000px} 54 | 55 | .navside:target ul { 56 | position: relative; 57 | top: 0; 58 | } 59 | 60 | .navside h3:before { 61 | display: inline-block; 62 | content: " "; 63 | position: absolute; 64 | right: 15px; 65 | top: 20px; 66 | width: 10px; 67 | height: 5px; 68 | background: url(../img/arrow-menu.png) no-repeat center; 69 | background-size: 100%; 70 | -webkit-transform: rotate(-90deg); 71 | } 72 | 73 | .navside:target h3:before { 74 | background: url(../img/arrow-menu.png) no-repeat center; 75 | -webkit-transform: rotate(0deg); 76 | } 77 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | source: . 2 | destination: ./_site 3 | plugins_dir: ./_plugins 4 | layouts_dir: ./_layouts 5 | include: ['.htaccess'] 6 | exclude: [] 7 | keep_files: ['.git','.svn'] 8 | timezone: nil 9 | 10 | future: true 11 | show_drafts: nil 12 | limit_posts: 0 13 | highlighter: rouge 14 | 15 | permalink: date 16 | paginate_path: 'page:num' 17 | 18 | markdown: kramdown 19 | markdown_ext: markdown,mkd,mkdn,md 20 | textile_ext: textile 21 | 22 | excerpt_separator: "\n\n" 23 | 24 | safe: true 25 | #watch: false # deprecated 26 | #server: false # deprecated 27 | host: 0.0.0.0 28 | port: 4000 29 | baseurl: /iniciantes 30 | url: http://localhost:4000 31 | lsi: false 32 | 33 | kramdown: 34 | use_tex: false 35 | use_divs: false 36 | png_engine: blahtex 37 | png_dir: images/latex 38 | png_url: /images/latex 39 | 40 | rdiscount: 41 | extensions: [] 42 | 43 | redcarpet: 44 | extensions: [] 45 | 46 | kramdown: 47 | auto_ids: true 48 | footnote_nr: 1 49 | entity_output: as_char 50 | toc_levels: 1..6 51 | smart_quotes: lsquo,rsquo,ldquo,rdquo 52 | enable_coderay: false 53 | 54 | coderay: 55 | coderay_wrap: div 56 | coderay_line_numbers: inline 57 | coderay_line_numbers_start: 1 58 | coderay_tab_width: 4 59 | coderay_bold_every: 10 60 | coderay_css: style 61 | 62 | redcloth: 63 | hard_breaks: true 64 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-proto.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2006 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /** 17 | * @fileoverview 18 | * Registers a language handler for Protocol Buffers as described at 19 | * http://code.google.com/p/protobuf/. 20 | * 21 | * Based on the lexical grammar at 22 | * http://research.microsoft.com/fsharp/manual/spec2.aspx#_Toc202383715 23 | * 24 | * @author mikesamuel@gmail.com 25 | */ 26 | 27 | PR['registerLangHandler'](PR['sourceDecorator']({ 28 | 'keywords': ( 29 | 'bytes,default,double,enum,extend,extensions,false,' 30 | + 'group,import,max,message,option,' 31 | + 'optional,package,repeated,required,returns,rpc,service,' 32 | + 'syntax,to,true'), 33 | 'types': /^(bool|(double|s?fixed|[su]?int)(32|64)|float|string)\b/, 34 | 'cStyleComments': true 35 | }), ['proto']); 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | title: Para iniciantes 4 | --- 5 |
6 |
7 |

Comece aqui

8 |

Informações básicas e importantíssimas para você não se perder no caminho.

9 | Continue lendo 10 |
11 |
12 |

O que é HTML?

13 |

Saiba como funciona o HTML e quais as suas principais tags.

14 | Continue lendo 15 |
16 |
17 |

O que é CSS?

18 |

Entenda como funciona a linguagem visual que formata o layout de sites.

19 | Continue lendo 20 |
21 |
22 |

O que é JavaScript?

23 |

Como funciona o JavaScript, linguagem usada para controlar elementos e muito mais.

24 | Continue lendo 25 |
26 |
27 | 28 |
29 |

Sobre este guia

30 |

Este guia foi criado pela comunidade brasileira de desenvolvimento web para ajudar iniciantes da área que queiram encontrar conteúdo básico de qualidade e assim ingressar na área com mais confiança e conhecimento. Aproveite e divulgue o máximo possível!

31 |
32 | -------------------------------------------------------------------------------- /manual/css/font.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Propriedade Font 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

Propriedade Font

9 |

Formatando fonts de texto

10 |

A font trata das caracteristicas de todos os textos do site. Ela pode ser aplicada diretamente ao elemento body e por consequência todos os elementos filhos herdarão esta propriedade.

11 |

As propriedades da font são:

12 |
13 |
family
14 |
15 |

Determina a familia da font a ser usada. Existem dois tipos básicos: as famílias e as famílias genéricas

16 |

As famílias genéricas podem ser três:

17 |
    18 |
  • serif: Font com serifa.
    • 19 |
  • sans-serif: Font sem serifa.
    • 20 |
  • monoespace: Font com a mesma largura em todos os caracteres.
    • 21 |
22 |

Serifa 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.

23 | 
24 |       div {
25 |         font-family: "Times New Roman", Times, serif;;
26 |       }
27 |
28 |

Entre aspas vai o nome da font, seguido da familia (Times) e depois da família genérica (serif).

29 |
30 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

31 |
32 | -------------------------------------------------------------------------------- /manual/css/sintaxe-css.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Sintaxe do CSS 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

Escrevendo CSS

9 |

Como escrever código CSS

10 | 11 |

Sintaxe

12 |

Para escrever código CSS é necessário seguir uma regra. A regra é uma declaração que possui uma sintaxe própria bem simples que define a forma com que o estilo será aplicado aos nossos elementos HTML. Você pode ver a regra a seguir:

13 | 
14 | seletor{
15 |   propriedade: valor;
16 | }
17 |
18 | 19 |

A nossa regra como pode ser visto é composta de três partes principais: um seletor, uma propriedade e um valor a se aplicar.

20 |

Explicando de forma grotesca o seletor nada mais é do que o nosso elemento HTML ao qual queremos aplicar a regra (por exemplo: div, body).

21 |

A propriedade é o atributo do elemento que será aplicado a regra. (por exemplo: color, font, position).

22 |

Valor é a característica que o elemento irá assumir (por exemplo: cor azul, tamanho 14 para a fonte).

23 | 24 |

Exemplificando

25 |

Vamos para um exemplo:

26 | 
27 | body{
28 |   background-color: #000;
29 | }
30 |
31 | 32 |

No nosso exemplo o elemento ao qual estamos aplicando a regra é o BODY este é o nosso seletor, a nossa propriedade é background-color que define a cor de fundo do documento e o nosso valor #000 qué é igual a cor preta.

33 |
34 | -------------------------------------------------------------------------------- /manual/css/inserindo-css.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Inserindo CSS 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

Incluindo CSS na página

9 |

Existem três formas para incluir o código CSS em seu projeto

10 | 11 |

Inline

12 |

A primeira forma de aplicar CSS a uma página é utilizando o atributo style em elementos do HTML:

13 | 
14 | <p style="color: blue">Parágrafo com fonte azul.</p>
15 | <p>Esse outro parágrafo não é azul, a não ser que
16 | exista <span style="color: red">CSS em outro lugar</span>.</p>
17 |
18 | 19 |

Interno

20 |

A segunda forma é utilizar a tag style dentro do head da página HTML:

21 | 
22 | <head>
23 |   <style type="text/css">
24 |     seletor { propriedade: valor; }
25 |   </style>
26 | </head>
27 |
28 | 29 |

Externo

30 |

E a última - porém a mais utilizada - maneira de aplicar CSS é criar um ou mais arquivos com extensão .css e incluí-los na estrutura head do HTML:

31 | 
32 | <head>
33 |   <link rel="stylesheet" type="text/css" href="reset.css">
34 |   <link rel="stylesheet" type="text/css" href="styles.css">
35 | </head>
36 |
37 |
38 | -------------------------------------------------------------------------------- /manual/obasico/oquew3c.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que é W3C? 4 | --- 5 | {% include submenu-obasico.html %} 6 | 7 |
8 |

O W3C

9 |

Consórcio que regulamenta os padrões para web

10 |

Quando Tim Berners-Lee criou a web, o HTML e tudo mais, decidiu que era bom que houvesse um órgão para regulamentar, criar e manter os padrões para web. Esse órgão não teria fins lucrativos. Logo deu-se o nome de W3C: World Wide Web Consortium.

11 | 12 |

O W3C é apoiado por várias empresas como a Microsoft, Samsung, Apple, Google, Mozilla e etc... Todas essas empresas ajudam o W3C com um valor anual, ajudando-o a manter suas pesquisas e até mesmo incluindo membros de suas equipes nos grupos de trabalho de cada padrão. Dessa forma há uma ajuda mútua, fazendo com que essas empresas tenham sistemas e dispositivos que suportem cada vez mais os padrões web. Veja a lista completa dos membros que apoiam o W3C aqui.

13 | 14 |

Deixando claro que o W3C não precisa ser o responsável pela criação de linguagens como o HTML. Você também pode criar uma linguagem e submeter para o W3C e para os Browsers sugerindo que faça parte dos padrões. Isso aconteceu com outras linguagens que se tornaram populares como o Javascript desenvolvido pelo Ecma e até o HTML5, que foi iniciado por um grupo de desenvolvedores chamado WhatWG.

15 |
16 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/prettify.css: -------------------------------------------------------------------------------- 1 | /* Pretty printing styles. Used with prettify.js. */ 2 | 3 | /* SPAN elements with the classes below are added by prettyprint. */ 4 | .pln { color: #000 } /* plain text */ 5 | 6 | @media screen { 7 | .str { color: #080 } /* string content */ 8 | .kwd { color: #008 } /* a keyword */ 9 | .com { color: #800 } /* a comment */ 10 | .typ { color: #606 } /* a type name */ 11 | .lit { color: #066 } /* a literal value */ 12 | /* punctuation, lisp open bracket, lisp close bracket */ 13 | .pun, .opn, .clo { color: #660 } 14 | .tag { color: #008 } /* a markup tag name */ 15 | .atn { color: #606 } /* a markup attribute name */ 16 | .atv { color: #080 } /* a markup attribute value */ 17 | .dec, .var { color: #606 } /* a declaration; a variable name */ 18 | .fun { color: red } /* a function name */ 19 | } 20 | 21 | /* Use higher contrast and text-weight for printable form. */ 22 | @media print, projection { 23 | .str { color: #060 } 24 | .kwd { color: #006; font-weight: bold } 25 | .com { color: #600; font-style: italic } 26 | .typ { color: #404; font-weight: bold } 27 | .lit { color: #044 } 28 | .pun, .opn, .clo { color: #440 } 29 | .tag { color: #006; font-weight: bold } 30 | .atn { color: #404 } 31 | .atv { color: #060 } 32 | } 33 | 34 | /* Put a border around prettyprinted code snippets. */ 35 | pre.prettyprint { padding: 2px; border: 1px solid #888;} 36 | pre {font-size:12px !important;} 37 | 38 | /* Specify class=linenums on a pre to get line numbering */ 39 | ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */ 40 | li.L0, 41 | li.L1, 42 | li.L2, 43 | li.L3, 44 | li.L5, 45 | li.L6, 46 | li.L7, 47 | li.L8 { list-style-type: none } 48 | /* Alternate shading for lines */ 49 | li.L1, 50 | li.L3, 51 | li.L5, 52 | li.L7, 53 | li.L9 { background: #eee } 54 | -------------------------------------------------------------------------------- /manual/js/o-que-framework.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que é um framework? 4 | --- 5 | {% include submenu-js.html %} 6 | 7 |
8 |

O que é um Framework?

9 |

Entendendo o conceito

10 |

11 | Em uma busca rápida na web, é possível encontrar diversas definições para Framework, algumas simples, outras mais elaboradas, mas o ponto comum entre todas é a reusabilidade. 12 |

13 |

14 | Assim um Framework tem como principal objetivo resolver problemas recorrentes com uma abordagem genérica, permitindo ao desenvolvedor focar seus esforços na resolução do problema em si, e não ficar reescrevendo software. Você pode se perguntar, então Framework é uma biblioteca? Bem quase isso, pode-se dizer que é um conjunto de bibliotecas ou componentes que são usados para criar uma base onde sua aplicação será construída. 15 |

16 |

17 | As frameworks ajudam no desenvolvimento rápido e seguro de aplicações mas é recomendável, estudar antes a tecnologia em que a mesma é desenvolvida. Logo é importante estudar os aspectos básicos do javascript antes de se aventurar em uma framework da Linguagem. Possuindo o conhecimento das tecnologias da Framework é possível fazer suas própias modificações para que a framework possa atender todas as necessidades do desenvolvedor. 18 |

19 |

Frameworks em Destaque no Desenvolvimento Web

20 |

21 | Existe diversas frameworks para desenvolvimento de aplicações, mas o nosso foco será em ferramentas para criação de sites. Abaixo são listados alguns que podem ajudar na sua carreira. 22 |

23 |

Boostrap

24 |

25 | É utilizado para desenvolvimento de componentes de interface de sites, utilizado html, css e javascript e foi desenvolvido levando em consideração técnicas de design, para melhorar a experiência visual do usuário. 26 |

27 |
28 | -------------------------------------------------------------------------------- /manual/obasico/oquedom.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que é DOM? 4 | --- 5 | {% include submenu-obasico.html %} 6 | 7 |
8 |

O que é DOM?

9 |

A árvore de elementos do HTML.

10 |

Sigla para Document Object Model, o DOM é a interface entre a linguagem Javascript e os objetos do HTML.

11 |

O DOM foi criado pela W3C com o objetivo de desenvolver um padrão para linguagens de script para os navegadores já que antigamente cada navegador tinha seu próprio modo de manipular os objetos, o que gerava muita incompatibilidade e obrigava os desenvolvedores a escrever uma versão de script para cada navegador.

12 |

Quando uma página web é carregada o navegador cria o DOM, a árvore de elementos do HTML.

13 |

Imagem demonstrando a árvore de elementos criada

14 |

Entendendo a árvore

15 |

Document

16 |

Quando um documento HTML é carregado no navegador da Web, torna-se um objeto de documento. O objeto de documento é o nó raiz do documento HTML e o "dono" de todos os outros nós.

17 |

Element

18 |

O objeto de elemento representa todas as tags que estão em arquivos HTML ou XML. Os objetos de elemento pode ter nós filhos de nós de texto, além de atributos.

19 |

Text

20 |

Texto que vai entre os elementos, o conteúdo das tags (<p>este é um texto</p>).

21 |

Attribute

22 |

O objeto atributo representa um atributo que pertence sempre a um elemento HTML.

23 |

Através da estrutura criada, é possível, adicionar, alterar e remover elementos e atributos da árvore DOM utilizando JavaScript.

24 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

25 |
26 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-tex.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2011 Martin S. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | /** 16 | * @fileoverview 17 | * Support for tex highlighting as discussed on 18 | * meta.tex.stackexchange.com. 19 | * 20 | * @author Martin S. 21 | */ 22 | 23 | PR.registerLangHandler( 24 | PR.createSimpleLexer( 25 | [ 26 | // whitespace 27 | [PR.PR_PLAIN, /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'], 28 | // all comments begin with '%' 29 | [PR.PR_COMMENT, /^%[^\r\n]*/, null, '%'] 30 | ], 31 | [ 32 | //[PR.PR_DECLARATION, /^\\([egx]?def|(new|renew|provide)(command|environment))\b/], 33 | // any command starting with a \ and contains 34 | // either only letters (a-z,A-Z), '@' (internal macros) 35 | [PR.PR_KEYWORD, /^\\[a-zA-Z@]+/], 36 | // or contains only one character 37 | [PR.PR_KEYWORD, /^\\./], 38 | // Highlight dollar for math mode and ampersam for tabular 39 | [PR.PR_TYPE, /^[$&]/], 40 | // numeric measurement values with attached units 41 | [PR.PR_LITERAL, 42 | /[+-]?(?:\.\d+|\d+(?:\.\d*)?)(cm|em|ex|in|pc|pt|bp|mm)/i], 43 | // punctuation usually occurring within commands 44 | [PR.PR_PUNCTUATION, /^[{}()\[\]=]+/] 45 | ]), 46 | ['latex', 'tex']); 47 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-wiki.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2009 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /** 17 | * @fileoverview 18 | * Registers a language handler for Wiki pages. 19 | * 20 | * Based on WikiSyntax at http://code.google.com/p/support/wiki/WikiSyntax 21 | * 22 | * @author mikesamuel@gmail.com 23 | */ 24 | 25 | PR['registerLangHandler']( 26 | PR['createSimpleLexer']( 27 | [ 28 | // Whitespace 29 | [PR['PR_PLAIN'], /^[\t \xA0a-gi-z0-9]+/, null, 30 | '\t \xA0abcdefgijklmnopqrstuvwxyz0123456789'], 31 | // Wiki formatting 32 | [PR['PR_PUNCTUATION'], /^[=*~\^\[\]]+/, null, '=*~^[]'] 33 | ], 34 | [ 35 | // Meta-info like #summary, #labels, etc. 36 | ['lang-wiki.meta', /(?:^^|\r\n?|\n)(#[a-z]+)\b/], 37 | // A WikiWord 38 | [PR['PR_LITERAL'], /^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/ 39 | ], 40 | // A preformatted block in an unknown language 41 | ['lang-', /^\{\{\{([\s\S]+?)\}\}\}/], 42 | // A block of source code in an unknown language 43 | ['lang-', /^`([^\r\n`]+)`/], 44 | // An inline URL. 45 | [PR['PR_STRING'], 46 | /^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i], 47 | [PR['PR_PLAIN'], /^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/] 48 | ]), 49 | ['wiki']); 50 | 51 | PR['registerLangHandler']( 52 | PR['createSimpleLexer']([[PR['PR_KEYWORD'], /^#[a-z]+/i, null, '#']], []), 53 | ['wiki.meta']); 54 | -------------------------------------------------------------------------------- /slide/css/gallery-sass/_gallery.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | @mixin gallery( $item-count ) { 4 | $total-duration: $display-duration * $item-count; 5 | $item-count: 11; 6 | 7 | @keyframes controlAnimation-#{$item-count} { 8 | 0% { @include inactive-button; } 9 | #{100% * $transition-duration / $total-duration}, 10 | #{100% * $display-duration / $total-duration} { @include active-button; } 11 | #{100% * ($display-duration + $transition-duration) / $total-duration}, 12 | 100% { @include inactive-button; } 13 | } 14 | 15 | @keyframes galleryAnimation-#{$item-count} { 16 | 0% { opacity: 0; } 17 | #{100% * $transition-duration / $total-duration}, 18 | #{100% * $display-duration / $total-duration} { opacity: 1; } 19 | #{100% * ($display-duration + $transition-duration) / $total-duration}, 20 | 100% { opacity: 0; } 21 | } 22 | 23 | .items-#{$item-count} { 24 | &.autoplay .control-button { animation: controlAnimation-#{$item-count} #{$total-duration}s infinite; } 25 | &.autoplay .item { animation: galleryAnimation-#{$item-count} #{$total-duration}s infinite; } 26 | 27 | @for $j from 1 through $item-count { 28 | .control-operator:nth-of-type(#{$j}):target ~ .item:nth-of-type(#{$j}) { pointer-events: auto; opacity: 1; } 29 | .control-operator:nth-of-type(#{$j}):target ~ .controls .control-button:nth-of-type(#{$j}) { @extend %active-button; } 30 | 31 | .control-button:nth-of-type(#{$j}), 32 | .item:nth-of-type(#{$j}) { 33 | $delay: #{($j - 1) * ($display-duration) - $transition-duration}s; 34 | 35 | animation-delay: #{$delay}; 36 | } 37 | } 38 | } 39 | } 40 | 41 | .gallery { 42 | 43 | .item:first-of-type { position: static; opacity: 1; } // Set the first item to be visible 44 | .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; } 45 | 46 | .control-operator { display: none; } // Stop hash links from scrolling up and down 47 | 48 | .control-operator:target ~ .item { pointer-events: none; opacity: 0; animation: none; } // Unselected image 49 | 50 | .control-button:first-of-type { @extend %active-button; } 51 | .control-operator:target ~ .controls .control-button { @extend %inactive-button; animation: none; } // Kill button animation when there is a selected image 52 | } -------------------------------------------------------------------------------- /slide/js/script.js: -------------------------------------------------------------------------------- 1 | ;(function(){ 2 | // Meh. Probably using an old IE version. 3 | if (!document.querySelectorAll || !window.addEventListener) { 4 | return; 5 | } 6 | 7 | // Map all keys for navigating slides. 8 | var keys = { 9 | forward: [39, 75, 32] 10 | , backward: [37, 74] 11 | }; 12 | 13 | // Hold touch events. 14 | var touches = {move: []}; 15 | 16 | // Get the slides count. 17 | var slidesCount = document.querySelectorAll(".control-button").length; 18 | 19 | // Detect the current slide. 20 | var currentSlide = parseInt(location.hash.replace(/#item-/, "") || 1, 10); 21 | 22 | // Change the slide url. 23 | var changeSlide = function() { 24 | location.hash = "#item-" + currentSlide; 25 | }; 26 | 27 | // Go forward when possible. 28 | var forward = function() { 29 | if (currentSlide < slidesCount) { 30 | currentSlide += 1; 31 | } 32 | 33 | changeSlide(); 34 | }; 35 | 36 | // Go backward when possible. 37 | var backward = function() { 38 | if (currentSlide > 1) { 39 | currentSlide -= 1; 40 | } 41 | 42 | changeSlide(); 43 | }; 44 | 45 | // Listen to the keyboard events. 46 | window.addEventListener("keyup", function(event) { 47 | keys.forward.indexOf(event.keyCode) >= 0 && forward(); 48 | keys.backward.indexOf(event.keyCode) >= 0 && backward(); 49 | }, false); 50 | 51 | // Listen to the touch events. 52 | window.addEventListener("touchmove", function(event){ 53 | touches.move.push(event); 54 | }, false); 55 | 56 | window.addEventListener("touchstart", function(event) { 57 | touches.start = event; 58 | }, false); 59 | 60 | window.addEventListener("touchend", function(event){ 61 | touches.end = event; 62 | 63 | var elapsedTime = touches.end.timeStamp - touches.start.timeStamp; 64 | var startX = touches.start.pageX; 65 | var endX = touches.move.slice(-1)[0].pageX; 66 | 67 | // If took too much time, don't consider as a swipe event. 68 | if (elapsedTime > 200) { 69 | return; 70 | } 71 | 72 | // The minimum swipe size. 73 | if (Math.abs(startX - endX) < 50) { 74 | return; 75 | } 76 | 77 | if (startX > endX) { 78 | forward(); 79 | } else { 80 | backward(); 81 | } 82 | }, false); 83 | })(); 84 | -------------------------------------------------------------------------------- /manual/obasico/desenvolvimentocamadas.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que é desenvolvimento por camadas? 4 | --- 5 | {% include submenu-obasico.html %} 6 | 7 |
8 |

Desenvolvimento por camadas

9 |

Separando a informação, formatação e comportamento

10 | 11 |

Basicamente existem três separações no desenvolvimento web: Informação, que fica com o código HTML, onde você vai dar significado à informação. Formatação, que fica com o CSS, que é como você vai dar estilo a toda informação marcada com HTML. E por fim a camada de Comportamento, que é como você vai controlar elementos do HTML com Javascript e seus frameworks.

12 | 13 |

O HTML vai servir para marcar sua informação dando significado a ela. Se você marca uma frame com a tag <H1>, você está dizendo para leitores de telas para cegos, motores de buscas e browsers, que aquela frase se trata de um título importante. Você deu significado à este pedaço de texto.

14 | 15 |

Logo depois você precisará deixar esse título com uma cor diferente, com um background bonito e uma fonte legal. Aí você entra com o CSS para fazer esse trabalho. Essa formatação é importante por que você precisa deixar o site do jeito que o Designer quer. Lembre-se que aqui você só modifica o visual do elemento e não o significado dele.

16 | 17 |

Essa separação garante que ao modificar o código CSS você não estrague o trabalho já feito no HTML. Os códigos estão totalmente separados e você consegue manter a organização sob controle, mantendo cada código em seu devido lugar.

18 |

Por isso, evite inserir código CSS direto no HTML, como o exemplo abaixo:

19 | 20 | 
21 | <h1 style="background-color: orange;">Título com fundo laranja</h1>
22 |
23 | 24 |

Isso faz com que você suje seu código HTML e não deixe seu código CSS centralizado em um lugar. Suponha que você tenha outros títulos com o fundo laranja e queira mudar todos para outra cor, você terá que encontrar cada um deles dentro do seu projeto e mudar manualmente cada um. Com o desenvolvimento em camadas você não tem problemas assim.

25 | 26 |

Este é o conhecimento básico sobre camadas client-side que você pode ter.

27 |
28 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-vhdl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * Registers a language handler for VHDL '93. 4 | * 5 | * Based on the lexical grammar and keywords at 6 | * http://www.iis.ee.ethz.ch/~zimmi/download/vhdl93_syntax.html 7 | * 8 | * @author benoit@ryder.fr 9 | */ 10 | 11 | PR['registerLangHandler']( 12 | PR['createSimpleLexer']( 13 | [ 14 | // Whitespace 15 | [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'] 16 | ], 17 | [ 18 | // String, character or bit string 19 | [PR['PR_STRING'], /^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i], 20 | // Comment, from two dashes until end of line. 21 | [PR['PR_COMMENT'], /^--[^\r\n]*/], 22 | [PR['PR_KEYWORD'], /^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i, null], 23 | // Type, predefined or standard 24 | [PR['PR_TYPE'], /^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i, null], 25 | // Predefined attributes 26 | [PR['PR_TYPE'], /^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i, null], 27 | // Number, decimal or based literal 28 | [PR['PR_LITERAL'], /^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i], 29 | // Identifier, basic or extended 30 | [PR['PR_PLAIN'], /^(?:[a-z]\w*|\\[^\\]*\\)/i], 31 | // Punctuation 32 | [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/] 33 | ]), 34 | ['vhdl', 'vhd']); 35 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/js-modules/regexpPrecederPatterns.pl: -------------------------------------------------------------------------------- 1 | use strict; 2 | 3 | print " 4 | 5 | /** 6 | * A set of tokens that can precede a regular expression literal in 7 | * javascript 8 | * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html 9 | * has the full list, but I've removed ones that might be problematic when 10 | * seen in languages that don't support regular expression literals. 11 | * 12 | *

Specifically, I've removed any keywords that can't precede a regexp 13 | * literal in a syntactically legal javascript program, and I've removed the 14 | * \"in\" keyword since it's not a keyword in many languages, and might be used 15 | * as a count of inches. 16 | * 17 | *

The link a above does not accurately describe EcmaScript rules since 18 | * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works 19 | * very well in practice. 20 | * 21 | * \@private 22 | * \@const 23 | */ 24 | var REGEXP_PRECEDER_PATTERN = "; 25 | 26 | my @preceders = ( 27 | "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=", 28 | "&=", "(", "*", "*=", 29 | # "+", "-", ".", "..", "..." handled below 30 | "+=", ",", "-=", "->", "/", "/=", ":", "::", ";", 31 | "<", "<<", "<<=", "<=", "=", "==", "===", ">", 32 | ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[", 33 | "^", "^=", "^^", "^^=", "{", "|", "|=", "||", 34 | "||=", "~", # handles =~ and !~ 35 | "break", "case", "continue", "delete", 36 | "do", "else", "finally", "instanceof", 37 | "return", "throw", "try", "typeof" 38 | ); 39 | my $pattern = "'(?:^^\\\\.?|[+-]"; # match at beginning or sign. 40 | foreach my $preceder (@preceders) { 41 | $preceder =~ s/([^=<>:&a-z])/\\\\$1/gi; 42 | $pattern .= "|$preceder"; 43 | } 44 | $pattern .= ")\\\\s*'"; # matches at end, and matches empty string 45 | print "$pattern;\n"; 46 | 47 | print " 48 | // CAVEAT: this does not properly handle the case where a regular 49 | // expression immediately follows another since a regular expression may 50 | // have flags for case-sensitivity and the like. Having regexp tokens 51 | // adjacent is not valid in any language I'm aware of, so I'm punting. 52 | // TODO: maybe style special characters inside a regexp as punctuation. 53 | "; 54 | -------------------------------------------------------------------------------- /manual/css/seletores.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Seletores do CSS 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |

8 |

Selecionando elementos

9 |

Entenda como formatar os elementos do CSS

10 |

Seletores CSS ajudam a especificar melhor o elemento que deve ser afetado.

11 |

Vejamos alguns seletores:

12 | 13 |
14 |
Elemento Filho (A > B)
15 |
16 |

Para selecionar um elemento (B) que tenha um elemento pai específico (A), deve-se utilizar o ">".

17 |

Ex.: 18 | 

19 | nav.menu-principal > ul {
20 |   padding: 0;
21 | }
22 | // neste caso, somente o elemento ul, que tem como pai um elemento nav com classe "menu-principal", receberá a alteração de preenchimento
23 |
24 |

25 |
26 | 27 |
Elemento Irmão (A + B)
28 |
29 |

Quando um elemento (B) está ao lado de outro específico (A).

30 |

Ex.: 31 | 

32 | label + input {
33 |   border: 1px solid #333;
34 | }
35 | // todos os inputs que estiverem ao lado de um label receberão borda cinza
36 |
37 |

38 |
39 | 40 |
Não este elemento (A:not(b))
41 |
42 |

Exclui determinado elemento (A) de acordo com a especificação (b).

43 | 
44 | div:not(.principal) {
45 |   border: 1px solid #F00;
46 | }
47 | // todas as divs que não tenham a classe "principal" receberão borda vermelha
48 |
49 |
50 | 51 |
Primeiro Filho (A:first-child)
52 |
53 |

Seleciona o primeiro elemento que aparecer, de acordo com o elemento definido (A).

54 | 
55 | li:first-child {
56 |   background-color: #0F0;
57 | }
58 | // O primeiro li terá fundo verde
59 |
60 |
61 | 62 |
Enésimo Elemento (A:nth-child(b))
63 |
64 |

Seleciona o elemento definido (A) de acordo com a posição informada (b).

65 | 
66 | li:nth-child(7) {
67 |   background-color: #666;
68 | }
69 | // O sétimo li terá fundo cinza
70 |
71 |
72 |
73 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

74 |
75 | -------------------------------------------------------------------------------- /manual/css/display.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Propriedade Display 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

Propriedade Display

9 |

Entendendo e manipulando o fluxo dos elementos

10 | 11 |

Entender a propriedade display é fundamental para que possamos compreender o fluxo e estruturação de uma página web. Todos os elementos por padrão já possuem um valor para a propriedade e, geralmente estas são block ou inline.

12 | 13 |

Essa propriedade CSS especifica o tipo de renderização do elemento na página. Uma definição que pode auxiliar no entendimento da propriedade é a do Chris Coyier, bastante reconhecido no mundo do CSS, que é a seguinte:

14 | 15 |

Todo elemento em uma página web é renderizado como uma caixa retangular. A propriedade display de CSS vai determinar como essa caixa vai ser comportar

16 | 17 |

Os possíveis tipos

18 | 19 |

Block

20 |

O elemento se comporta como um bloco. Ocupando praticamente toda a largura disponível na página. Elementos de parágrafo (p) e título(h1, h2, ...) possuem esse comportamento por padrão.

21 | 22 |

Inline

23 |

O elemento se comporta como um elemento em linha. Exemplos de elemento que se comportam assim são por exemplo as tags span e a.

24 | 25 |

None

26 |

Ao contrários dos valores atuais, o valor none permite, informalmente dizendo, que você desative a propriedade do elemento. Quando você utiliza essa propriedade, o elemento e todos seus elementos filhos não são renderizados na página.

27 | 28 |

Uma coisa importante a ressaltar que a propriedade display: none não é a mesma coisa da propriedade visibility: hidden. Nessa última o elemento não aparece na tela mas é renderizado na página, ou seja, vemos um espaço vazio no lugar do elemento; já a propriedade display: none não renderiza o elemento e, o espaço que era ocupado por ele, é ocupado pelo elemento seguinte no fluxo do documento.

29 | 30 |

Table

31 |

O elemento se comporta como uma tabela.

32 | 33 |

Inline-block

34 |

Semelhante ao inline, no entanto, ao definirmos inline-block em um elemento, conseguimos definir as propriedades de largura e altura para ele. Coisa que não conseguimos em um elemento com display: inline.

35 |
-------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-go.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2010 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | 17 | /** 18 | * @fileoverview 19 | * Registers a language handler for the Go language.. 20 | *

21 | * Based on the lexical grammar at 22 | * http://golang.org/doc/go_spec.html#Lexical_elements 23 | *

24 | * Go uses a minimal style for highlighting so the below does not distinguish 25 | * strings, keywords, literals, etc. by design. 26 | * From a discussion with the Go designers: 27 | * 

28 |  * On Thursday, July 22, 2010, Mike Samuel <...> wrote:
29 |  * > On Thu, Jul 22, 2010, Rob 'Commander' Pike <...> wrote:
30 |  * >> Personally, I would vote for the subdued style godoc presents at http://golang.org
31 |  * >>
32 |  * >> Not as fancy as some like, but a case can be made it's the official style.
33 |  * >> If people want more colors, I wouldn't fight too hard, in the interest of
34 |  * >> encouragement through familiarity, but even then I would ask to shy away
35 |  * >> from technicolor starbursts.
36 |  * >
37 |  * > Like http://golang.org/pkg/go/scanner/ where comments are blue and all
38 |  * > other content is black?  I can do that.
39 |  *
40 | * 41 | * @author mikesamuel@gmail.com 42 | */ 43 | 44 | PR['registerLangHandler']( 45 | PR['createSimpleLexer']( 46 | [ 47 | // Whitespace is made up of spaces, tabs and newline characters. 48 | [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'], 49 | // Not escaped as a string. See note on minimalism above. 50 | [PR['PR_PLAIN'], /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])+(?:\'|$)|`[^`]*(?:`|$))/, null, '"\''] 51 | ], 52 | [ 53 | // Block comments are delimited by /* and */. 54 | // Single-line comments begin with // and extend to the end of a line. 55 | [PR['PR_COMMENT'], /^(?:\/\/[^\r\n]*|\/\*[\s\S]*?\*\/)/], 56 | [PR['PR_PLAIN'], /^(?:[^\/\"\'`]|\/(?![\/\*]))+/i] 57 | ]), 58 | ['go']); 59 | -------------------------------------------------------------------------------- /manual/obasico/o-que-front-back.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que é front-end e back-end? 4 | --- 5 | {% include submenu-obasico.html %} 6 | 7 |
8 |

O que é client-side e server-side?

9 |

Diferenças entre linguagem client-side e linguagem server-side

10 | 11 |

12 | Existem dois tipos de linguagens para desenvolvermos para internet: as linguagens client-side e as linguagens server-side. Você pode ver estes nomes meio diferentes em outros lugares como por exemplo, front-end, se referindo às linguagens client-side e back-end se referindo às linguagens server-side. Não se preocupe, são a mesma coisa. Mas nesse texto, para que você possa entender melhor, vamos usar client-side e server-side. 13 |

14 |

15 | As linguagens server-side são linguagens que o SERVIDOR entende. Isso quer dizer que vai escrever um código onde o servidor vai processá-lo e então vai mandar para o seu navegador a resposta. 16 |

17 |

18 | As linguagens client-side são linguagens onde apenas o seu NAVEGADOR vai entender. Quem vai processar essa linguagem não é o servidor, mas o seu browser. 19 |

20 |

Por exemplo: se criarmos um script em linguagem back-end (PHP, Asp, Java, Ruby, etc) que apenas calcula a soma de 2 + 2, será o SERVIDOR (ou back, o server) que calculará este resultado. Se fizermos esse cálculo em alguma linguagem front-end, como o JavaScript, quem calculará essa conta é o BROWSER do usuário. Por isso o termo client ou front.

21 |

22 | Imagem demonstrando a diferença entre Client-side e Server-side 23 |

24 | 25 |

Assim, os profissionais que trabalham na interface do usuário, são chamados de Desenvolvedores front-end, e aqueles que trabalham no core da aplicação, fazendo uma programação que somente o servidor irá entender são chamados de Desenvolvedores back-end.

26 | 27 |

Exemplos de linguagens

28 |

Essas linguagens são linguagens client-side. É o que vamos aprender durante todo esse conteúdo:

29 | 34 | 35 |

Essas são linguagens server-side, são as linguagens com que os programadores back-end trabalham:

36 | 43 |
44 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-lua.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2008 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | 17 | /** 18 | * @fileoverview 19 | * Registers a language handler for Lua. 20 | * 21 | * 22 | * To use, include prettify.js and this file in your HTML page. 23 | * Then put your code in an HTML tag like 24 | * 
(my Lua code)
25 | * 26 | * 27 | * I used http://www.lua.org/manual/5.1/manual.html#2.1 28 | * Because of the long-bracket concept used in strings and comments, Lua does 29 | * not have a regular lexical grammar, but luckily it fits within the space 30 | * of irregular grammars supported by javascript regular expressions. 31 | * 32 | * @author mikesamuel@gmail.com 33 | */ 34 | 35 | PR['registerLangHandler']( 36 | PR['createSimpleLexer']( 37 | [ 38 | // Whitespace 39 | [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'], 40 | // A double or single quoted, possibly multi-line, string. 41 | [PR['PR_STRING'], /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/, null, '"\''] 42 | ], 43 | [ 44 | // A comment is either a line comment that starts with two dashes, or 45 | // two dashes preceding a long bracketed block. 46 | [PR['PR_COMMENT'], /^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/], 47 | // A long bracketed block not preceded by -- is a string. 48 | [PR['PR_STRING'], /^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/], 49 | [PR['PR_KEYWORD'], /^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/, null], 50 | // A number is a hex integer literal, a decimal real literal, or in 51 | // scientific notation. 52 | [PR['PR_LITERAL'], 53 | /^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i], 54 | // An identifier 55 | [PR['PR_PLAIN'], /^[a-z_]\w*/i], 56 | // A run of punctuation 57 | [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/] 58 | ]), 59 | ['lua']); 60 | -------------------------------------------------------------------------------- /manual/html/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O HTML 4 | --- 5 | {% include submenu-html.html %} 6 | 7 |
8 |

O que é HTML?

9 |

Linguagem base dos websites

10 | 11 |

Camadas de desenvolvimento

12 |

13 | Existem 3 linguagens básicas que utilizamos para criar websites: HTML, CSS e JavaScript.
14 | O HTML é a linguagem que irá exibir a informação. O CSS é a linguagem que vai deixar essa informação bonitona. O JavaScript é a linguagem que vai fazer essa informação receber alguns comportamentos, como por exemplo ao criar um submenu ou controlar algo que aparece e desaparece na tela. 15 |

16 |

17 | O HTML sem dúvida é a mais importante de todas, por que como dissemos no começo, é ela que exibe a informação. Além de exibir a informação, ela dá significado. Isso é importante por que alguns sistemas como o Google, que irão ler sua página, precisam entender o que é cada elemento nela e o que cada um desses elementos significam. 18 |

19 | 20 |

O nome HTML

21 |

22 | O acrônico HTML significa em inglês: HyperText Markup Language. Para gente aqui fica: Linguagem de Marcação de Hipertexto. Bonito, né?
23 | Por trás das palavras Hipertexto e Marcação 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. 24 |

25 |

Se você tiver que guardar alguma coisa sobre o que é HTML, guarde isso: HTML serve para dar significado e organizar a informação dos websites. 26 |

27 |

28 | Tendo isso em mente, você já saberá muito mais do que a maioria dos profissionais por aí.

29 | 30 |

Marcação

31 |

Já que o HTML serve para dar significado para a informação, como ele faz isso? Simples: ele marca a informação com as tags.

32 | 33 |

Por exemplo, para falarmos que um título é um título colocamos um pedaço de texto entre uma tag chamada H1. Veja o código abaixo:

34 | 
35 | <h1>Aqui vai o texto que é um título</h1>
36 |
37 | 38 |

E dessa forma vamos fazendo todos os outros elementos. Um parágrafo, por exemplo:

39 | 
40 | <p>Aqui vai muito texto, um parágrafo</p>
41 |
42 | 43 |

O resultado fica assim:

44 |
45 |

Aqui vai o texto que é um título

46 |

Aqui vai muito texto, um parágrafo

47 |
48 | 49 |

Continue lendo sobre isso aqui.

50 |
51 | -------------------------------------------------------------------------------- /manual/js/o-que-jquery.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que é jQuery? 4 | --- 5 | {% include submenu-js.html %} 6 | 7 |
8 |

O que é jQuery?

9 |

É um framework JavaScript

10 |

Lançada em 2006, por John Resig, jQuery, segundo definição consta em seu site, trata-se de uma rápida, pequena e rica em features biblioteca JavaScript.

11 |

Como o lema "Write less, do more." (escreva menos, faça mais), jQuery revolucionou o desenvolvimento web, sendo presente em inúmeros projetos atualmente.

12 |

Mas, por que é tão utilizado?

13 |

Exatamente pelo seu lema. Com jQuery é possível fazer diversos efeitos com poucas linhas e, que custariam dezenas de linhas em JavaScript puro.

14 |

Alguns recursos oferecidos facilmente pelo jQuery:

15 | 23 |

Como uso?

24 |

Igualmente qualquer arquivo JavaScript você precisa inseri-lo na página com as tags script. Você pode fazer o link para uma CDN como a do Google ou fazer o download do framework no seu projeto e linkar direto (vale lembrar que se optar por essa opção, faça o link para a versão minificada).

25 | 
26 | <script src="js/jquery.min.js"></script>
27 |
28 |

A sintaxe

29 |

A sintaxe básica é a seguinte:

30 | 
$('seletorHTML').acao();
31 |

Alguns exemplos práticos

32 |

Manipulação HTML

33 | 
$( "#botao" ).html( "Sucesso!" )
34 |

No exemplo acima, selecionamos o elemento com ID botão e inserimos a string "Sucesso!".

35 |

Eventos

36 | 
37 | var box = $( "#box" );
38 | $( "#botao" ).on( "click", function( event ) {
39 |   box.show();
40 | });
41 |
42 |

No snippet acima, guardarmos em uma variável o elemento com ID box. Em seguida, adicionao ao elemento com ID 'botao' o evento do clique. Ao ser disparado, esse evento mostra o elemento, que guardarmos na variável box anteriormente, através do método show().

43 | 44 |

Esta página está em construção. Volte em breve ou ajude a completá-la!

45 |
46 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-scala.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2010 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /** 17 | * @fileoverview 18 | * Registers a language handler for Scala. 19 | * 20 | * Derived from http://lampsvn.epfl.ch/svn-repos/scala/scala-documentation/trunk/src/reference/SyntaxSummary.tex 21 | * 22 | * @author mikesamuel@gmail.com 23 | */ 24 | 25 | PR['registerLangHandler']( 26 | PR['createSimpleLexer']( 27 | [ 28 | // Whitespace 29 | [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'], 30 | // A double or single quoted string 31 | // or a triple double-quoted multi-line string. 32 | [PR['PR_STRING'], 33 | /^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/, 34 | null, '"'], 35 | [PR['PR_LITERAL'], /^`(?:[^\r\n\\`]|\\.)*`?/, null, '`'], 36 | [PR['PR_PUNCTUATION'], /^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/, null, 37 | '!#%&()*+,-:;<=>?@[\\]^{|}~'] 38 | ], 39 | [ 40 | // A symbol literal is a single quote followed by an identifier with no 41 | // single quote following 42 | // A character literal has single quotes on either side 43 | [PR['PR_STRING'], /^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/], 44 | [PR['PR_LITERAL'], /^'[a-zA-Z_$][\w$]*(?!['$\w])/], 45 | [PR['PR_KEYWORD'], /^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/], 46 | [PR['PR_LITERAL'], /^(?:true|false|null|this)\b/], 47 | [PR['PR_LITERAL'], /^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i], 48 | // Treat upper camel case identifiers as types. 49 | [PR['PR_TYPE'], /^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/], 50 | [PR['PR_PLAIN'], /^[$a-zA-Z_][\w$]*/], 51 | [PR['PR_COMMENT'], /^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/], 52 | [PR['PR_PUNCTUATION'], /^(?:\.+|\/)/] 53 | ]), 54 | ['scala']); 55 | -------------------------------------------------------------------------------- /manual/css/class-id.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: Diferença de CLASS e ID 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

Qual a diferença entre CLASS e ID?

9 |

Em HTML e CSS, há a possibilidade de aplicar estilos através de 'class' e 'id' e, em JavaScript é possível indentificar algum elemento de uma página por sua classe, id ou tag. Mas qual a diferença entre 'class' e 'id'?

10 | 11 |

O que são classes?

12 |

As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez. Exemplo:

13 | 14 |

Código CSS:

15 | 
16 | .classe1 {
17 |   background: blue;
18 | }
19 |
20 | 21 |

Código HTML:

22 | 
23 | <!DOCTYPE html>
24 | <html lang="pt-br">
25 |   <head>
26 |     <title></title>
27 |     <meta charset="utf-8">
28 |   </head>
29 |   <body>
30 |     <div class="classe1">Div1</div>
31 |     <div class="classe1">Div2</div>
32 |     <div class="classe1">Div3</div>
33 |     <div class="classe1">Div4</div>
34 |     <div class="classe1">Div5</div>
35 |   </body>
36 | </html>
37 |
38 |

Então, todas as 'divs' que estiverem com a classe "classe1" estarão com um background azul(blue).

39 | 40 | 41 |

O que são ids?

42 |

As ids são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento em especial. Exemplo:

43 | 44 |

Código CSS:

45 | 
46 | #idUm {
47 |   background: blue;
48 | }
49 | #idDois {
50 |   background: yellow;
51 | }
52 | #idTres {
53 |   background: lightblue;
54 | }
55 | #idQuatro {
56 |   background: lightgreen;
57 | }
58 |
59 | 60 |

Código HTML:

61 | 
62 | <!DOCTYPE html>
63 | <html lang="pt-br">
64 |   <head>
65 |     <title></title>
66 |     <meta charset="utf-8">
67 |   </head>
68 |   <body>
69 |     <div id="idUm">Div1</div>
70 |     <div id="idDois">Div2</div>
71 |     <div id="idTres">Div3</div>
72 |     <div id="idQuatro">Div4</div>
73 |   </body>
74 | </html>
75 |
76 |

Então, como mostra o código acima, não podemos repetir uma 'id'. Deve ser especialmente única para cada elemento.

77 |
78 | -------------------------------------------------------------------------------- /manual/css/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: interna 3 | title: O que é CSS? 4 | --- 5 | {% include submenu-css.html %} 6 | 7 |
8 |

O que é CSS?

9 |

10 | O Cascading Style Sheets (CSS) é uma linguagem utilizada para definir a apresentação (aparência) de documentos que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML e etc..). O CSS define como serão exibidos os elementos contidos no código de um documento e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento. 11 |

12 | 13 |

Por que o CSS foi criado?

14 |

15 | Com a evolução dos recursos de programação, as tecnologias estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos, também precisaram ser aprimoradas. 16 |

17 | 18 |

19 | Foram criadas novas tags e atributos de estilo para o HTML e em resumo, ele passou a exercer tanto a função de estruturar o conteúdo quanto de apresentá-lo para o usuário final. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas. Ou seja, as alterações teriam que ser feitas manualmente, uma a uma. 20 |

21 | 22 |

23 | A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, permitiu um compartilhamento de formato e reduziu a repetição no conteúdo estrutural de um documento. 24 |

25 | 26 |

27 | Com isto, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de um documento, enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela. Isto é feito por meio da criação de um arquivo externo que contém todas as regras aplicadas e com isto, é possível fazer alterações de estilo em todas as páginas de um site e outros documentos que utilizam CSS de forma fácil e rápida. 28 |

29 | 30 |

31 | O CSS também permite que as mesmas marcações de um documento sejam apresentadas em diferentes estilos, conforme os métodos de renderização (como em uma tela, impressão, via voz, baseadas em dispositivos táteis, etc.). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS. 32 |

33 |
34 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-apollo.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2009 Onno Hommes. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /** 17 | * @fileoverview 18 | * Registers a language handler for the AGC/AEA Assembly Language as described 19 | * at http://virtualagc.googlecode.com 20 | *

21 | * This file could be used by goodle code to allow syntax highlight for 22 | * Virtual AGC SVN repository or if you don't want to commonize 23 | * the header for the agc/aea html assembly listing. 24 | * 25 | * @author ohommes@alumni.cmu.edu 26 | */ 27 | 28 | PR['registerLangHandler']( 29 | PR['createSimpleLexer']( 30 | [ 31 | // A line comment that starts with ; 32 | [PR['PR_COMMENT'], /^#[^\r\n]*/, null, '#'], 33 | // Whitespace 34 | [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'], 35 | // A double quoted, possibly multi-line, string. 36 | [PR['PR_STRING'], /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"'] 37 | ], 38 | [ 39 | [PR['PR_KEYWORD'], /^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,null], 40 | [PR['PR_TYPE'], /^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null], 41 | // A single quote possibly followed by a word that optionally ends with 42 | // = ! or ?. 43 | [PR['PR_LITERAL'], 44 | /^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/], 45 | // Any word including labels that optionally ends with = ! or ?. 46 | [PR['PR_PLAIN'], 47 | /^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i], 48 | // A printable non-space non-special character 49 | [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0()\"\\\';]+/] 50 | ]), 51 | ['apollo', 'agc', 'aea']); 52 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-clj.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license Copyright (C) 2011 Google Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** 18 | * @fileoverview 19 | * Registers a language handler for Clojure. 20 | * 21 | * 22 | * To use, include prettify.js and this file in your HTML page. 23 | * Then put your code in an HTML tag like 24 | * 

(my lisp code)
25 | * The lang-cl class identifies the language as common lisp. 26 | * This file supports the following language extensions: 27 | * lang-clj - Clojure 28 | * 29 | * 30 | * I used lang-lisp.js as the basis for this adding the clojure specific 31 | * keywords and syntax. 32 | * 33 | * "Name" = 'Clojure' 34 | * "Author" = 'Rich Hickey' 35 | * "Version" = '1.2' 36 | * "About" = 'Clojure is a lisp for the jvm with concurrency primitives and a richer set of types.' 37 | * 38 | * 39 | * I used Clojure.org Reference as 40 | * the basis for the reserved word list. 41 | * 42 | * 43 | * @author jwall@google.com 44 | */ 45 | 46 | PR['registerLangHandler']( 47 | PR['createSimpleLexer']( 48 | [ 49 | // clojure has more paren types than minimal lisp. 50 | ['opn', /^[\(\{\[]+/, null, '([{'], 51 | ['clo', /^[\)\}\]]+/, null, ')]}'], 52 | // A line comment that starts with ; 53 | [PR['PR_COMMENT'], /^;[^\r\n]*/, null, ';'], 54 | // Whitespace 55 | [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'], 56 | // A double quoted, possibly multi-line, string. 57 | [PR['PR_STRING'], /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"'] 58 | ], 59 | [ 60 | // clojure has a much larger set of keywords 61 | [PR['PR_KEYWORD'], /^(?:def|if|do|let|quote|var|fn|loop|recur|throw|try|monitor-enter|monitor-exit|defmacro|defn|defn-|macroexpand|macroexpand-1|for|doseq|dosync|dotimes|and|or|when|not|assert|doto|proxy|defstruct|first|rest|cons|defprotocol|deftype|defrecord|reify|defmulti|defmethod|meta|with-meta|ns|in-ns|create-ns|import|intern|refer|alias|namespace|resolve|ref|deref|refset|new|set!|memfn|to-array|into-array|aset|gen-class|reduce|map|filter|find|nil?|empty?|hash-map|hash-set|vec|vector|seq|flatten|reverse|assoc|dissoc|list|list?|disj|get|union|difference|intersection|extend|extend-type|extend-protocol|prn)\b/, null], 62 | [PR['PR_TYPE'], /^:[0-9a-zA-Z\-]+/] 63 | ]), 64 | ['clj']); 65 | -------------------------------------------------------------------------------- /assets/javascripts/prettify/src/lang-css.js: -------------------------------------------------------------------------------- 1 | // Copyright (C) 2009 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | 17 | /** 18 | * @fileoverview 19 | * Registers a language handler for CSS. 20 | * 21 | * 22 | * To use, include prettify.js and this file in your HTML page. 23 | * Then put your code in an HTML tag like 24 | * 

25 |  *
26 |  *
27 |  * http://www.w3.org/TR/CSS21/grammar.html Section G2 defines the lexical
28 |  * grammar.  This scheme does not recognize keywords containing escapes.
29 |  *
30 |  * @author mikesamuel@gmail.com
31 |  */
32 | 
33 | PR['registerLangHandler'](
34 |     PR['createSimpleLexer'](
35 |         [
36 |          // The space production 
37 |          [PR['PR_PLAIN'],       /^[ \t\r\n\f]+/, null, ' \t\r\n\f']
38 |         ],
39 |         [
40 |          // Quoted strings.   and 
41 |          [PR['PR_STRING'],
42 |           /^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/, null],
43 |          [PR['PR_STRING'],
44 |           /^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/, null],
45 |          ['lang-css-str', /^url\(([^\)\"\']*)\)/i],
46 |          [PR['PR_KEYWORD'],
47 |           /^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,
48 |           null],
49 |          // A property name -- an identifier followed by a colon.
50 |          ['lang-css-kw', /^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],
51 |          // A C style block comment.  The  production.
52 |          [PR['PR_COMMENT'], /^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
53 |          // Escaping text spans
54 |          [PR['PR_COMMENT'], /^(?:)/],
55 |          // A number possibly containing a suffix.
56 |          [PR['PR_LITERAL'], /^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],
57 |          // A hex color
58 |          [PR['PR_LITERAL'], /^#(?:[0-9a-f]{3}){1,2}/i],
59 |          // An identifier
60 |          [PR['PR_PLAIN'],
61 |           /^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],
62 |          // A run of punctuation
63 |          [PR['PR_PUNCTUATION'], /^[^\s\w\'\"]+/]
64 |         ]),
65 |     ['css']);
66 | PR['registerLangHandler'](
67 |     PR['createSimpleLexer']([],
68 |         [
69 |          [PR['PR_KEYWORD'],
70 |           /^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]
71 |         ]),
72 |     ['css-kw']);
73 | PR['registerLangHandler'](
74 |     PR['createSimpleLexer']([],
75 |         [
76 |          [PR['PR_STRING'], /^[^\)\"\']+/]
77 |         ]),
78 |     ['css-str']);
79 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/src/lang-ml.js:
--------------------------------------------------------------------------------
 1 | // Copyright (C) 2008 Google Inc.
 2 | //
 3 | // Licensed under the Apache License, Version 2.0 (the "License");
 4 | // you may not use this file except in compliance with the License.
 5 | // You may obtain a copy of the License at
 6 | //
 7 | //      http://www.apache.org/licenses/LICENSE-2.0
 8 | //
 9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 | 
15 | 
16 | 
17 | /**
18 |  * @fileoverview
19 |  * Registers a language handler for OCaml, SML, F# and similar languages.
20 |  *
21 |  * Based on the lexical grammar at
22 |  * http://research.microsoft.com/en-us/um/cambridge/projects/fsharp/manual/spec.html#_Toc270597388
23 |  *
24 |  * @author mikesamuel@gmail.com
25 |  */
26 | 
27 | PR['registerLangHandler'](
28 |     PR['createSimpleLexer'](
29 |         [
30 |          // Whitespace is made up of spaces, tabs and newline characters.
31 |          [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
32 |          // #if ident/#else/#endif directives delimit conditional compilation
33 |          // sections
34 |          [PR['PR_COMMENT'],
35 |           /^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,
36 |           null, '#'],
37 |          // A double or single quoted, possibly multi-line, string.
38 |          // F# allows escaped newlines in strings.
39 |          [PR['PR_STRING'],      /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])(?:\'|$))/, null, '"\'']
40 |         ],
41 |         [
42 |          // Block comments are delimited by (* and *) and may be
43 |          // nested. Single-line comments begin with // and extend to
44 |          // the end of a line.
45 |          // TODO: (*...*) comments can be nested.  This does not handle that.
46 |          [PR['PR_COMMENT'],     /^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],
47 |          [PR['PR_KEYWORD'],     /^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
48 |          // A number is a hex integer literal, a decimal real literal, or in
49 |          // scientific notation.
50 |          [PR['PR_LITERAL'],
51 |           /^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
52 |          [PR['PR_PLAIN'],       /^(?:[a-z_][\w']*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],
53 |          // A printable non-space non-special character
54 |          [PR['PR_PUNCTUATION'], /^[^\t\n\r \xA0\"\'\w]+/]
55 |         ]),
56 |     ['fs', 'ml']);
57 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/src/lang-n.js:
--------------------------------------------------------------------------------
 1 | // Copyright (C) 2011 Zimin A.V.
 2 | //
 3 | // Licensed under the Apache License, Version 2.0 (the "License");
 4 | // you may not use this file except in compliance with the License.
 5 | // You may obtain a copy of the License at
 6 | //
 7 | //      http://www.apache.org/licenses/LICENSE-2.0
 8 | //
 9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 | 
15 | 
16 | /**
17 |  * @fileoverview
18 |  * Registers a language handler for the Nemerle language.
19 |  * http://nemerle.org
20 |  * @author Zimin A.V.
21 |  */
22 | (function () {
23 |   var keywords = 'abstract|and|as|base|catch|class|def|delegate|enum|event|extern|false|finally|'
24 |          + 'fun|implements|interface|internal|is|macro|match|matches|module|mutable|namespace|new|'
25 |          + 'null|out|override|params|partial|private|protected|public|ref|sealed|static|struct|'
26 |          + 'syntax|this|throw|true|try|type|typeof|using|variant|virtual|volatile|when|where|with|'
27 |          + 'assert|assert2|async|break|checked|continue|do|else|ensures|for|foreach|if|late|lock|new|nolate|'
28 |          + 'otherwise|regexp|repeat|requires|return|surroundwith|unchecked|unless|using|while|yield';
29 | 
30 |   var shortcutStylePatterns = [
31 |         [PR.PR_STRING, /^(?:\'(?:[^\\\'\r\n]|\\.)*\'|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/, null, '"'],
32 |         [PR.PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/, null, '#'],
33 |         [PR.PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']
34 |   ];
35 |   
36 |   var fallthroughStylePatterns = [
37 |         [PR.PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null],
38 |         [PR.PR_STRING, /^<#(?:[^#>])*(?:#>|$)/, null],
39 |         [PR.PR_STRING, /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, null],
40 |         [PR.PR_COMMENT, /^\/\/[^\r\n]*/, null],
41 |         [PR.PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null],
42 |         [PR.PR_KEYWORD, new RegExp('^(?:' + keywords + ')\\b'), null],
43 |         [PR.PR_TYPE, /^(?:array|bool|byte|char|decimal|double|float|int|list|long|object|sbyte|short|string|ulong|uint|ufloat|ulong|ushort|void)\b/, null],
44 |         [PR.PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
45 |         [PR.PR_TYPE, /^@[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
46 |         [PR.PR_PLAIN, /^'?[A-Za-z_$][a-z_$@0-9]*/i, null],
47 |         [PR.PR_LITERAL, new RegExp(
48 |              '^(?:'
49 |   // A hex number
50 |              + '0x[a-f0-9]+'
51 |   // or an octal or decimal number,
52 |              + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
53 |   // possibly in scientific notation
54 |              + '(?:e[+\\-]?\\d+)?'
55 |              + ')'
56 |   // with an optional modifier like UL for unsigned long
57 |              + '[a-z]*', 'i'), null, '0123456789'],
58 | 
59 |         [PR.PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#]*/, null]
60 |   ];
61 |   PR.registerLangHandler(PR.createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns), ['n', 'nemerle']);
62 | })();
63 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/js-modules/extractSourceSpans.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Split markup into a string of source code and an array mapping ranges in
  3 |  * that string to the text nodes in which they appear.
  4 |  *
  5 |  * 

  6 |  * The HTML DOM structure:

  7 |  * 
  8 |  * (Element   "p"
  9 |  *   (Element "b"
 10 |  *     (Text  "print "))       ; #1
 11 |  *   (Text    "'Hello '")      ; #2
 12 |  *   (Element "br")            ; #3
 13 |  *   (Text    "  + 'World';")) ; #4
 14 |  * 

 15 |  * 

 16 |  * corresponds to the HTML
 17 |  * {@code 
print 'Hello '
  + 'World';
}.

 18 |  *
 19 |  * 

 20 |  * It will produce the output:

 21 |  * 
 22 |  * {
 23 |  *   sourceCode: "print 'Hello '\n  + 'World';",
 24 |  *   //                 1         2
 25 |  *   //       012345678901234 5678901234567
 26 |  *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
 27 |  * }
 28 |  * 

 29 |  * 

 30 |  * where #1 is a reference to the {@code "print "} text node above, and so
 31 |  * on for the other text nodes.
 32 |  * 

 33 |  *
 34 |  * 

 35 |  * The {@code} spans array is an array of pairs.  Even elements are the start
 36 |  * indices of substrings, and odd elements are the text nodes (or BR elements)
 37 |  * that contain the text for those substrings.
 38 |  * Substrings continue until the next index or the end of the source.
 39 |  * 

 40 |  *
 41 |  * @param {Node} node an HTML DOM subtree containing source-code.
 42 |  * @return {Object} source code and the text nodes in which they occur.
 43 |  */
 44 | function extractSourceSpans(node) {
 45 |   var nocode = /(?:^|\s)nocode(?:\s|$)/;
 46 | 
 47 |   var chunks = [];
 48 |   var length = 0;
 49 |   var spans = [];
 50 |   var k = 0;
 51 | 
 52 |   var whitespace;
 53 |   if (node.currentStyle) {
 54 |     whitespace = node.currentStyle.whiteSpace;
 55 |   } else if (window.getComputedStyle) {
 56 |     whitespace = document.defaultView.getComputedStyle(node, null)
 57 |         .getPropertyValue('white-space');
 58 |   }
 59 |   var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
 60 | 
 61 |   function walk(node) {
 62 |     switch (node.nodeType) {
 63 |       case 1:  // Element
 64 |         if (nocode.test(node.className)) { return; }
 65 |         for (var child = node.firstChild; child; child = child.nextSibling) {
 66 |           walk(child);
 67 |         }
 68 |         var nodeName = node.nodeName;
 69 |         if ('BR' === nodeName || 'LI' === nodeName) {
 70 |           chunks[k] = '\n';
 71 |           spans[k << 1] = length++;
 72 |           spans[(k++ << 1) | 1] = node;
 73 |         }
 74 |         break;
 75 |       case 3: case 4:  // Text
 76 |         var text = node.nodeValue;
 77 |         if (text.length) {
 78 |           if (!isPreformatted) {
 79 |             text = text.replace(/[ \t\r\n]+/g, ' ');
 80 |           } else {
 81 |             text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
 82 |           }
 83 |           // TODO: handle tabs here?
 84 |           chunks[k] = text;
 85 |           spans[k << 1] = length;
 86 |           length += text.length;
 87 |           spans[(k++ << 1) | 1] = node;
 88 |         }
 89 |         break;
 90 |     }
 91 |   }
 92 | 
 93 |   walk(node);
 94 | 
 95 |   return {
 96 |     sourceCode: chunks.join('').replace(/\n$/, ''),
 97 |     spans: spans
 98 |   };
 99 | }
100 | 


--------------------------------------------------------------------------------
/slide/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic);
  2 | 
  3 | .logo-tableles {
  4 |   position: absolute;
  5 |   bottom: 20px;
  6 |   left: 20px;
  7 | }
  8 | 
  9 | html, body {
 10 |   height: 100%;
 11 |   background: #E5E5E5;
 12 | }
 13 | 
 14 | .limit {
 15 |   display: table-cell;
 16 |   vertical-align: middle;
 17 | }
 18 | 
 19 | article:after {
 20 |   content: "";
 21 |   clear: both;
 22 |   display: block;
 23 | }
 24 | article {
 25 |   background: #FFF;
 26 |   max-width: 850px;
 27 |   margin: 0 auto;
 28 |   padding: 50px;
 29 | }
 30 | 
 31 | article a {
 32 |   color: #bf3605;
 33 | }
 34 | 
 35 | article h1 {
 36 |   margin: 0 0 30px;
 37 |   padding: 45px 0 0;
 38 |   font: 100 2em "Lato", helvetica, arial, tahoma, sans-serif;
 39 |   font-weight: 100 !important;
 40 |   color: #E73D31;
 41 |   position: relative;
 42 |   text-transform: uppercase !important;
 43 | }
 44 | 
 45 | article h1:before {
 46 |   position: absolute;
 47 |   top: -120px;
 48 |   left: 50%;
 49 |   margin-left: -72px;
 50 |   display: block;
 51 |   background-color: #E73D31;
 52 |   color: #FFF;
 53 |   padding: 35px;
 54 |   font-size: 2em;
 55 | }
 56 | article h2 {
 57 |   margin: 0 0 30px;
 58 |   font: 300 2em "Lato", helvetica, arial, tahoma, sans-serif;
 59 |   font-weight: 300 !important;
 60 |   color: #666;
 61 |   position: relative;
 62 | }
 63 | 
 64 | article p {
 65 |   font: 0.9em/1.7em helvetica, arial, tahoma, sans-serif;
 66 |   color: #666;
 67 |   text-align: left;
 68 | }
 69 | 
 70 | article nav {
 71 |   border: 1px solid rgba(0,0,0,0.3);
 72 |   background: #FFF;
 73 |   width: 300px;
 74 |   margin: 20px;
 75 |   display: inline-block;
 76 |   vertical-align: top;
 77 | }
 78 | article nav ul, article nav ol {
 79 |   padding: 0;
 80 |   margin: 0;
 81 | }
 82 | article nav h2 {
 83 |   background: rgba(0,0,0,0.8);
 84 |   padding: 10px;
 85 |   margin: 0;
 86 |   color:#FFF;
 87 |   font-size: 1.5em;
 88 | }
 89 | article nav li {list-style: none;}
 90 | article nav li a {
 91 |   border-bottom: 1px solid rgba(0,0,0,0.2);
 92 |   text-decoration: none;
 93 |   display: block;
 94 |   padding: 10px;
 95 |   text-align: center;
 96 |   color: rgba(0,0,0,0.8);
 97 |   font-size: 0.9em;
 98 | }
 99 | article nav li:last-child a {border-bottom: 0;}
100 | 
101 | article nav li a:hover {
102 |   background: rgba(0,0,0,0.1);
103 | }
104 | .info {
105 |   margin-top: 35px;
106 | }
107 | 
108 | .info :before {
109 |   display: block;
110 |   font-size: 3em;
111 | }
112 | 
113 | .info [class*="icon-"] {
114 |   display: inline-block;
115 |   margin-left: 25px;
116 |   color: #333;
117 | }
118 | 
119 | .middleEqual {
120 |   color: #333;
121 |   font-size: 3em;
122 |   display: inline-block;
123 |   padding: 0 20px;
124 |   vertical-align: top;
125 | }
126 | 
127 | 
128 | 
129 | @media screen and (max-width: 780px) {
130 |   body {
131 |     font-size: 70%;
132 |   }
133 | 
134 | .gallery .controls {
135 |     position: static;
136 |     height: auto;
137 |   }
138 | 
139 | article {padding: 25px;}
140 | 
141 | .gallery .item {
142 |   display: block;
143 | }
144 | 
145 | 
146 | article h1:before {
147 |     top: -25px;
148 |     margin-left: -25px;
149 |     padding: 15px;
150 |     font-size: 1em;
151 |   }
152 |   .lnk-fork {
153 |     display: none;
154 |   }
155 | 
156 |   .logo-tableles {
157 |     float: left;
158 |     position: static;
159 |   }
160 | 
161 | }
162 | 
163 | 
164 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Iniciantes
 2 | ==========
 3 | Em uma conversa no Twitter, algumas pessoas identificaram que faltava conteúdo para iniciantes. Resolvemos então criar um conteúdo básico, mínimo, para que alguém que esteja iniciando na área tenha alguma bagagem para aprender informações importantes de forma que ela saiba por onde começar.
 4 | 
 5 | ----------
 6 | 
 7 | Guia básico para iniciantes
 8 | ----------
 9 | Se você quiser ajudar a melhorar este guia, escrevendo, corrigindo ou aprimorando a experiência de utilização, por favor, faça um FORK do projeto e mãos à obra.
10 | 
11 | Como funciona
12 | ----------
13 | Utilizamos [Jekyll](http://jekyllrb.com) uma Gem do [Ruby](http://www.ruby-lang.org/) para gerar páginas estáticas.
14 | 
15 | 1. Instale o [Ruby](http://www.ruby-lang.org/pt/downloads/)
16 | 
17 | 2. Instale a Gem do [Bundler](http://bundler.io/):
18 |     ```
19 |     gem install bundler
20 |     ```
21 | 3. Clone o projeto:
22 |     ```
23 |     git@github.com:tableless/iniciantes.git
24 |     ```
25 | 4. Vá a pasta do projeto:
26 |     ```
27 |     cd iniciantes
28 |     ```
29 | 5. Instale as dependências através do [Bundler](http://bundler.io/):
30 |     ```
31 |     bundle install
32 |     ```
33 | 5. Inicie o [Jekyll](http://jekyllrb.com/):
34 |     ```
35 |     jekyll serve -w
36 |     ```
37 | 5. Acesse [http://localhost:4000/iniciantes/](http://localhost:4000/iniciantes/)
38 | 
39 | Escrevendo código com syntax highlight
40 | ----------
41 | Para escrever código, usamos o Google Prettify, que já é conhecido de todos. Uma estrutura para código básica segue abaixo:
42 | 
43 | 	
44 |         <!DOCTYPE html>
45 | 	    <html lang="pt-br">
46 | 	      <head>
47 | 	        <title></title>
48 | 	        <meta charset="utf-8">
49 | 	      </head>
50 | 	      <body>
51 | 
52 | 	      </body>
53 | 	    </html>
54 | 	

55 | 
56 | A classe `lang-x` define a linguagem do código, onde `x` é a linguagem (javascript, css, php, asp, ruby e assim por diante). Lembre-se de escapar sinais como < > colocando em entidades HTML (&lt; &gt;).
57 | 
58 | Estrutura básica de diretórios
59 | ----------
60 | Dentro de **manual** você encontra todos os textos do guia. Lá está separado em 4 pastas básicas: **obasico** onde agrupa textos sobre o conceito da área. A pasta **HTML** contém textos sobre HTML e seu funcionamento. A pasta **CSS** tem textos sobre CSS. E por último mas não menos importante, a pasta **JS** guarda textos sobre JavaScript e afins.
61 | 
62 | A pasta **assets** guarda o CSS, o JS e as imagens usadas no projeto.
63 | 
64 | 
65 | ```
66 | | iniciantes/
67 | |
68 | |-- _includes/
69 | |
70 | |-- _layouts/
71 | |
72 | |-- assets/
73 | |   |-- imgs
74 | |   |-- javascripts
75 | |   |-- stylesheet
76 | |
77 | |-- manual/
78 | |   |-- css
79 | |   |-- html
80 | |   |-- js
81 | |   |-- obasico
82 | |
83 | |-- slide/
84 | |   |-- css
85 | |   	|-- fonts
86 | |   	|-- galery-sass
87 | |   	|-- galery
88 | |   |-- img
89 | |   |-- js
90 | |   |-- layout
91 | ```
92 | 
93 | 
94 | Da comunidade para a comunidade
95 | ----------
96 | Esta iniciativa é da comunidade para a comunidade. Prezamos pelo bom conteúdo e sabemos que encontrar conteúdo básico é muito difícil, por isso tente divulgar o máximo que puder para aqueles que estão começando. Dessa forma temos a certeza de que a qualidade da internet brasileira vai crescer ainda mais.
97 | 


--------------------------------------------------------------------------------
/manual/js/arrays.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: Arrays
 4 | ---
 5 | {% include submenu-js.html %}
 6 | 
 7 | 

 8 |   
Arrays

 9 |   
Valores agrupados

10 | 
11 |   
Com o Array é possível armazenar um conjunto de quaisquer valores javascript, como números, caracteres ou textos ou uma mistura deles. Imagine o array como um gaveteiro onde você pode adicionar ou retirar gavetas e cada gaveta comtém o objeto que quiser, vamos criar aqui um gaveteiro onde a primeira gaveta contém o valor 10 a segunda 20 e a terceira 30.

12 |   
Vejamos:

13 | 
14 | var  gaveteiro = [10,20,30];
15 | 

16 | 
17 |   
Simples não é? A diferença no Javascript é que a contagem de cada posição do array começa em zero, assim temos: gaveta 0, gaveta 1 e gaveta 2.

18 | 
19 |   
Acessando elementos do array

20 |   
Com o nosso array criado podemos visualizar cada uma das posições individualmente colocando o indice dentro de colchetes:

21 |   
22 | console.log(gaveteiro[2]); //30
23 | console.log(gaveteiro[1]); //20
24 | console.log(gaveteiro[0]); //10
25 | 

26 | 
27 |   
Também podemos alterar o valor de cada posição da seguinte forma:

28 | 
29 | var  gaveteiro = [10,20,30];
30 | gaveteiro[2] = 99;
31 | console.log(gaveteiro[2]);
32 | 

33 |   
Assim dizemos que gaveteiro na posição 2 recebeu o valor 99.

34 | 
35 |   
Adicionando elementos no array

36 |   
Caso precise adicionar uma nova gaveta, podemos usar o método push:

37 | 
38 | var  gaveteiro = [10,20,30];
39 | gaveteiro.push(100);
40 | console.log(gaveteiro[3]); //100
41 | 

42 |   
 O método push recebe 100 como parametro e adiciona na ultima posição do array.

43 | 
44 |   
Removendo elementos no array

45 |   
Caso precise remover/recortar uma gaveta, podemos usar os seguintes métodos:

46 | 
 - Para remover a ultima gaveta, utilizamos o pop:
47 | 
48 | var  gaveteiro = [10,20,30];
49 | console.log(gaveteiro[2]); //30
50 | gaveteiro.pop();
51 | console.log(gaveteiro[2]); //undefined
52 | 

53 | 
 - Para remover a primeira gaveta, utilizamos o shift:
54 | 
55 | var  gaveteiro = [10,20,30];
56 | console.log(gaveteiro[0]); //10
57 | gaveteiro.shift();
58 | console.log(gaveteiro[0]); //20
59 | 

60 | 
 - Para retornar apenas algumas gavetas (recortar), utilizamos o slice:
61 | 
62 | var  gaveteiro = [10,20,30];
63 | var novaGaveta = gaveteiro.slice(1,3);
64 | console.log(novoGaveteiro); //[20, 30]
65 | 

66 | 
67 |   
Quantidade de elementos do array

68 |   
Depois de ter adicionado várias gavetas, pode surgir a necessidade de saber quantas já existem, para isso vamos acessar a propridade length: 

69 | 
70 | var  gaveteiro = [1,2,3,10,20,30];
71 | console.log(gaveteiro.length); //6
72 | gaveteiro.push(100);
73 | gaveteiro.push(200);
74 | gaveteiro.push(300);
75 | gaveteiro.push(400);
76 | console.log(gaveteiro.length); //10
77 | gaveteiro.push(200);
78 | console.log(gaveteiro.length); //11
79 | 

80 | 

81 | 


--------------------------------------------------------------------------------
/manual/html/estruturabasica.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: Estrutura básica
 4 | ---
 5 | {% include submenu-html.html %}
 6 | 
 7 | 

 8 |   
Estrutura básica

 9 |   
Iniciando o código básico de HTML

10 | 
11 |   
O documento HTML sempre inicia com o que chamamos de estrutura básica. Esta estrutura é quase que imutável. Sempre será dessa forma e você sempre, sempre começará seu HTML começando por esse código. Geralmente os editores como o Sublime Text já tem atalhos para iniciar os documentos HTMLs com essa estrutura, logo, você não precisa se preocupar em decorá-la, mas é bom que faça. Veja abaixo como ela se inicia:

12 | 
13 | <!DOCTYPE html>
14 | <html lang="pt-br">
15 |   <head>
16 |     <title>Título da página</title>
17 |     <meta charset="utf-8">
18 |   </head>
19 |   <body>
20 |     Aqui vai o código HTML que fará seu site aparecer.
21 |   </body>
22 | </html>
23 | 

24 | 
25 |   
É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme a a seguinte estrutura:

26 |   
    
27 |     
  • Definição do documento (doctype)
    • 
28 |     
  • Cabeça (head)
    • 
29 |     
  • Corpo (body)
    • 
30 |   

31 |   
Doctype - Definindo o documento

32 |   
Uma coisa importante: SEMPRE deve existir o doctype, que é este código <!DOCTYPE html>.

33 |   
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.

34 | 
35 |   
HEAD

36 |   
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 head.

37 | 
38 |   
BODY

39 |   
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 <body> e </body>.

40 |   
Este é o preceito básico que deve estar muito bem claro para você: onde as marcações se aplicam, e quais são os resultados deste modelo. Por exemplo: se vocês deseja informar conteúdo textual para saída legível ao usuário do seu sistema web, esta marcação deverá obrigatoriamente estar no bloco do corpo da página. Ainda: para definir qual o tipo de codificação da página (uma meta informação do documento), esta deve obrigatoriamente estar marcada no cabeçalho do mesmo documento.

41 |   
Dentro do elemento BODY sua estrutura de página terá os elementos semânticos da construção da sua página, onde serão declarados e identificados cabeçalhos, rodapé, conteúdo principal, etc. 

42 | 

43 | 


--------------------------------------------------------------------------------
/manual/html/oquesemantica.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: O que é semântica?
 4 | ---
 5 | {% include submenu-html.html %}
 6 | 
 7 | 

 8 |   
O que é Semântica?

 9 |   
Organização e Significado

10 | 
11 |   

12 |     Quando eu era criança era costume fazer muitos trabalhos para a escola. O processo era quase sempre igual: a professora definia o assunto e ao chegar em casa, pegava um bocado de papel almaço e ia para casa da minha tia. Ela era a única da família que tinha enciclopédias. Se eu precisava fazer um trabalho escolar, certamente as enciclopédias da minha tia me ajudariam na tarefa. As tais enciclopédias eram pesadas. Chatas de serem manipuladas. Mas tinham tudo ou quase tudo do que precisava para completar o meu trabalho com o máximo de detalhes possível.
13 |   

14 |   
Organizando a informação: forma linear ou não linear

15 |   

16 |     Você já pensou em como se organiza informação? A informação - um texto por exemplo - pode ser organizada de forma linear ou não linear. Imagine um livro. Toda a informação contida no livro está organizada de forma linear, isto é, há começo, meio e fim. Você não consegue absorver todo o significado da história contada se iniciar sua leitura pela metade do livro. Você precisa, necessariamente, iniciar do primeiro capítulo até o último para absorver o máximo possível de informação sobre a história.
17 |   

18 |   

19 |     As enciclopédias tem suas informações organizadas de forma não linear. Isto é: as informações não estão organizadas em uma ordem específica, mas sim de forma relacional, associativa. Há uma série de assuntos e todos eles estão organizadas de uma maneira que se relacionam por meio de referências. Por exemplo: quando você procura informações sobre carros na enciclopédia, ao final do texto você encontra uma série de outras referências aos assuntos relacionados, como por exemplo: motores a combustão interna, rodas, combustíveis e etc.
20 |   

21 |   
Como você e a web funcionam

22 |   

23 |     É mais ou menos assim que a sua mente funciona também: quando você pensa em um assunto, você consegue fazer uma série de associações com outros assuntos, formando uma ideia, uma memória, uma lembrança. Por isso seu cérebro consegue guardar essas informações de uma jeito que se torna fácil de recuperá-las não apenas pensando nessa informação diretamente, mas também quando se pensa nos assuntos relacionados a esta informação.
24 |   

25 |   

26 |     Se levarmos isso para web, percebemos que apenas uma tag faz esse trabalho de referência e associação de informação: o link. Na web você relaciona informações, sites e etc utilizando diretamente a tag "A". Quando você linka um texto, uma imagem, um gráfico etc, você associa essa informação ao destino do link. Você está referenciando assuntos, como na enciclopédia. Sem os links não há web. Não conseguimos associar informação alguma. Perde-se a referência. Nós usamos o link todos os dias e aposto que a metade dos desenvolvedores não imagina a importância dessa tag.
27 |   

28 |   

29 |     Sugiro que você pesquise sobre a história do hipertexto. Você vai entender a amplitude do que significa organizar informação e da importância que isso teve para os dias de hoje tanto para web quanto para o mundo em si. É um assunto fascinante. Se quiser, comece por aqui: http://bit.ly/History_of_hypertext
30 |   

31 | 

32 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/src/lang-sql.js:
--------------------------------------------------------------------------------
 1 | // Copyright (C) 2008 Google Inc.
 2 | //
 3 | // Licensed under the Apache License, Version 2.0 (the "License");
 4 | // you may not use this file except in compliance with the License.
 5 | // You may obtain a copy of the License at
 6 | //
 7 | //      http://www.apache.org/licenses/LICENSE-2.0
 8 | //
 9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 | 
15 | 
16 | 
17 | /**
18 |  * @fileoverview
19 |  * Registers a language handler for SQL.
20 |  *
21 |  *
22 |  * To use, include prettify.js and this file in your HTML page.
23 |  * Then put your code in an HTML tag like
24 |  *      
(my SQL code)

25 |  *
26 |  *
27 |  * http://savage.net.au/SQL/sql-99.bnf.html is the basis for the grammar, and
28 |  * http://msdn.microsoft.com/en-us/library/aa238507(SQL.80).aspx as the basis
29 |  * for the keyword list.
30 |  *
31 |  * @author mikesamuel@gmail.com
32 |  */
33 | 
34 | PR['registerLangHandler'](
35 |     PR['createSimpleLexer'](
36 |         [
37 |          // Whitespace
38 |          [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
39 |          // A double or single quoted, possibly multi-line, string.
40 |          [PR['PR_STRING'],      /^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/, null,
41 |           '"\'']
42 |         ],
43 |         [
44 |          // A comment is either a line comment that starts with two dashes, or
45 |          // two dashes preceding a long bracketed block.
46 |          [PR['PR_COMMENT'], /^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],
47 |          [PR['PR_KEYWORD'], /^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|MATCH|MERGE|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|USING|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i, null],
48 |          // A number is a hex integer literal, a decimal real literal, or in
49 |          // scientific notation.
50 |          [PR['PR_LITERAL'],
51 |           /^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
52 |          // An identifier
53 |          [PR['PR_PLAIN'], /^[a-z_][\w-]*/i],
54 |          // A run of punctuation
55 |          [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]
56 |         ]),
57 |     ['sql']);
58 | 


--------------------------------------------------------------------------------
/manual/css/seletores-complexos.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: Seletores Complexos
 4 | ---
 5 | {% include submenu-css.html %}
 6 | 
 7 | 

 8 | 	
Seletores complexos

 9 | 	
Formatando elementos fora do fluxo normal do DOM

10 | 
11 |     
Selecionando diferentes elementos de um formulário

12 | 
13 |     
Tipos de Inputs

14 | 
15 | input[type="text"] { ... }
16 | input[type="email"] { ... }
17 | 

18 |     
No exemplo acima, selecionamos respectivamente elementos input do tipo text e email.

19 | 
20 |     
Input checkbox

21 | 
input[type="checkbox"]:checked { ... }

22 |     
A própria declaração é bem intuitiva. Seleciona elementos do tipo checkobx que estiverem selecionado (ou ticados).

23 | 
24 |     
Input inativo

25 | 
input:disabled { ... }

26 |     
Acima, selecionamos um input que esteja com o atributo disabled, estando assim inativo.

27 | 
28 |     
Selecionamento elementos pela extensão do arquivo

29 | 
30 | 
:lang(en) .flag { ... }

31 | 
32 |     
No exemplo, selecionamos o elemento com a classe .flag que é filho de uma página que possui o valor en.

33 | 
34 | 
35 | a[href$=".jpg"] { ... }
36 | a[href$=".pdf"] { ... }
37 | 

38 |     
Imagine uma lista de arquivos e que você precisa adicionar um ícone ou aplicar um estilo diferente de acordo com o tipo de arquivo em cada link. Com os seletores acima você consegue sem a necessidade de adicionar uma classe para cada um.

39 | 
40 |     
Selecionando elementos pelo target

41 | 
#element-id:target { ... }

42 |     
Elementos com âncora linkam o usuário a outras partes da página. Então o elemento acima seria selecionado quando seu id aparecesse na URL do usuário. Geralmente depois de um clique.

43 | 
44 |     
Selecionando elementos pelo atributo

45 |     
Existem seis maneiras diferentes de selecionarmos elementos por seus atributos:

46 | 
[att=valor]

47 |     
O atributo tem exatamente o mesmo valor especificado.

48 | 
49 | 
[att~=valor]

50 |     
O valor do atributo precisar ser uma lista de valores com espaço. Por exemplo class="box box-color box-sidebar", e um dos valores precisa ser exatamente igual ao valor que foi especificado.

51 | 
52 | 
[att|=valor]

53 |     
O atributo possui exatamente o mesmo valor que foi especificado ou é imediatamente seguindo de um traço. Dessa maneira, uma classe válida seria valor-X.

54 | 
55 | 
[att^=valor]

56 |     
O valor do atributo começa com o valor que foi especificado na regra.

57 | 
58 | 
[att$=valor]

59 |     
O valor do atributo termina com o valor que foi especificado na regra.

60 | 
61 | 
[att*=valor]

62 |     
O valor do atributo contém o valor do atributo especificado na regra.

63 | 
64 |     
Selecionando elementos pela negação

65 | 
div:not(.estilo) { ... }

66 |     
Acima, selecionamos todas as divs do documento, exceto as que possuem a classe .estilo.

67 | 
68 | 



--------------------------------------------------------------------------------
/assets/javascripts/prettify/src/lang-vb.js:
--------------------------------------------------------------------------------
 1 | // Copyright (C) 2009 Google Inc.
 2 | //
 3 | // Licensed under the Apache License, Version 2.0 (the "License");
 4 | // you may not use this file except in compliance with the License.
 5 | // You may obtain a copy of the License at
 6 | //
 7 | //      http://www.apache.org/licenses/LICENSE-2.0
 8 | //
 9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 | 
15 | 
16 | 
17 | /**
18 |  * @fileoverview
19 |  * Registers a language handler for various flavors of basic.
20 |  *
21 |  *
22 |  * To use, include prettify.js and this file in your HTML page.
23 |  * Then put your code in an HTML tag like
24 |  *      

25 |  *
26 |  *
27 |  * http://msdn.microsoft.com/en-us/library/aa711638(VS.71).aspx defines the
28 |  * visual basic grammar lexical grammar.
29 |  *
30 |  * @author mikesamuel@gmail.com
31 |  */
32 | 
33 | PR['registerLangHandler'](
34 |     PR['createSimpleLexer'](
35 |         [
36 |          // Whitespace
37 |          [PR['PR_PLAIN'],       /^[\t\n\r \xA0\u2028\u2029]+/, null, '\t\n\r \xA0\u2028\u2029'],
38 |          // A double quoted string with quotes escaped by doubling them.
39 |          // A single character can be suffixed with C.
40 |          [PR['PR_STRING'],      /^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i, null,
41 |           '"\u201C\u201D'],
42 |          // A comment starts with a single quote and runs until the end of the
43 |          // line.
44 |          [PR['PR_COMMENT'],     /^[\'\u2018\u2019][^\r\n\u2028\u2029]*/, null, '\'\u2018\u2019']
45 |         ],
46 |         [
47 |          [PR['PR_KEYWORD'], /^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i, null],
48 |          // A second comment form
49 |          [PR['PR_COMMENT'], /^REM[^\r\n\u2028\u2029]*/i],
50 |          // A boolean, numeric, or date literal.
51 |          [PR['PR_LITERAL'],
52 |           /^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],
53 |          // An identifier?
54 |          [PR['PR_PLAIN'], /^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],
55 |          // A run of punctuation
56 |          [PR['PR_PUNCTUATION'],
57 |           /^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],
58 |          // Square brackets
59 |          [PR['PR_PUNCTUATION'], /^(?:\[|\])/]
60 |         ]),
61 |     ['vb', 'vbs']);
62 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/src/lang-lisp.js:
--------------------------------------------------------------------------------
 1 | // Copyright (C) 2008 Google Inc.
 2 | //
 3 | // Licensed under the Apache License, Version 2.0 (the "License");
 4 | // you may not use this file except in compliance with the License.
 5 | // You may obtain a copy of the License at
 6 | //
 7 | //      http://www.apache.org/licenses/LICENSE-2.0
 8 | //
 9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 | 
15 | 
16 | 
17 | /**
18 |  * @fileoverview
19 |  * Registers a language handler for Common Lisp and related languages.
20 |  *
21 |  *
22 |  * To use, include prettify.js and this file in your HTML page.
23 |  * Then put your code in an HTML tag like
24 |  *      
(my lisp code)

25 |  * The lang-cl class identifies the language as common lisp.
26 |  * This file supports the following language extensions:
27 |  *     lang-cl - Common Lisp
28 |  *     lang-el - Emacs Lisp
29 |  *     lang-lisp - Lisp
30 |  *     lang-scm - Scheme
31 |  *
32 |  *
33 |  * I used http://www.devincook.com/goldparser/doc/meta-language/grammar-LISP.htm
34 |  * as the basis, but added line comments that start with ; and changed the atom
35 |  * production to disallow unquoted semicolons.
36 |  *
37 |  * "Name"    = 'LISP'
38 |  * "Author"  = 'John McCarthy'
39 |  * "Version" = 'Minimal'
40 |  * "About"   = 'LISP is an abstract language that organizes ALL'
41 |  *           | 'data around "lists".'
42 |  *
43 |  * "Start Symbol" = [s-Expression]
44 |  *
45 |  * {Atom Char}   = {Printable} - {Whitespace} - [()"\'']
46 |  *
47 |  * Atom = ( {Atom Char} | '\'{Printable} )+
48 |  *
49 |  * [s-Expression] ::= [Quote] Atom
50 |  *                  | [Quote] '(' [Series] ')'
51 |  *                  | [Quote] '(' [s-Expression] '.' [s-Expression] ')'
52 |  *
53 |  * [Series] ::= [s-Expression] [Series]
54 |  *            |
55 |  *
56 |  * [Quote]  ::= ''      !Quote = do not evaluate
57 |  *            |
58 |  *
59 |  *
60 |  * I used Practical Common Lisp as
61 |  * the basis for the reserved word list.
62 |  *
63 |  *
64 |  * @author mikesamuel@gmail.com
65 |  */
66 | 
67 | PR['registerLangHandler'](
68 |     PR['createSimpleLexer'](
69 |         [
70 |          ['opn',             /^\(+/, null, '('],
71 |          ['clo',             /^\)+/, null, ')'],
72 |          // A line comment that starts with ;
73 |          [PR['PR_COMMENT'],     /^;[^\r\n]*/, null, ';'],
74 |          // Whitespace
75 |          [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
76 |          // A double quoted, possibly multi-line, string.
77 |          [PR['PR_STRING'],      /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"']
78 |         ],
79 |         [
80 |          [PR['PR_KEYWORD'],     /^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/, null],
81 |          [PR['PR_LITERAL'],
82 |           /^[+\-]?(?:[0#]x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],
83 |          // A single quote possibly followed by a word that optionally ends with
84 |          // = ! or ?.
85 |          [PR['PR_LITERAL'],
86 |           /^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],
87 |          // A word that optionally ends with = ! or ?.
88 |          [PR['PR_PLAIN'],
89 |           /^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],
90 |          // A printable non-space non-special character
91 |          [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0()\"\\\';]+/]
92 |         ]),
93 |     ['cl', 'el', 'lisp', 'scm']);
94 | 


--------------------------------------------------------------------------------
/manual/css/margin-padding.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: interna
  3 | title: Propriedade Margin e Padding
  4 | ---
  5 | {% include submenu-css.html %}
  6 | 
  7 | 

  8 |   
Propriedade Margin e Padding

  9 |   
Manipulando espaços nos elementos

 10 |   
Margin

 11 |   
É a margem do elemento, ou seja, o espaçamento externo do elemento.

 12 |   
Algumas formas de escrita:

 13 |   

 14 |     
margin-top

 15 |     

 16 |       
Define a margem superior do elemento.

 17 | 
 18 | div {
 19 |   margin-top: 10px;
 20 | }
 21 | 

 22 |     

 23 |     
margin-right

 24 |     

 25 |       
Define a margem direita do elemento.

 26 | 
 27 | div {
 28 |   margin-right: 20px;
 29 | }
 30 | 

 31 |     

 32 |     
margin-bottom

 33 |     

 34 |       
Define a margem inferior do elemento.

 35 | 
 36 | div {
 37 |   margin-bottom: 30px;
 38 | }
 39 | 

 40 |     

 41 |     
margin-left

 42 |     

 43 |       
Define a margem esquerda do elemento.

 44 | 
 45 | div {
 46 |   margin-left: 40px;
 47 | }
 48 | 

 49 |     

 50 |     
margin

 51 |     

 52 |       
Define a margem do elemento. Este tipo de declaração pode ser dar de diversas formas.

 53 | 
 54 | /* t = topo; d = direita; b = baixo; e = esquerda; */
 55 | .div1 {
 56 |   /* t = 20px; d = 20px; b = 20px; e = 20px; */
 57 |   margin: 20px;
 58 | }
 59 | .div2 {
 60 |   /* t = 10px; d = 20px; b = 10px; e = 20px; */
 61 |   margin: 10px 20px;
 62 | }
 63 | .div3 {
 64 |   /* t = 10px; d = 20px; b = 30px; e = 20px; */
 65 |   margin: 10px 20px 30px;
 66 | }
 67 | .div4 {
 68 |   /* t = 10px; d = 20px; b = 30px; e = 40px; */
 69 |   margin: 10px 20px 30px 40px;
 70 | }
 71 | 

 72 |     

 73 |   

 74 |   
Padding

 75 |   
É o preenchimento do elemento, ou seja, o espaçamento interno do elemento.

 76 |   
Algumas formas de escrita:

 77 |   

 78 |     
padding-top

 79 |     

 80 |       
Define o preenchimento superior do elemento.

 81 | 
 82 | div {
 83 |   padding-top: 10px;
 84 | }
 85 | 

 86 |     

 87 |     
padding-right

 88 |     

 89 |       
Define o preenchimento direito do elemento.

 90 | 
 91 | div {
 92 |   padding-right: 20px;
 93 | }
 94 | 

 95 |     

 96 |     
padding-bottom

 97 |     

 98 |       
Define o preenchimento inferior do elemento.

 99 | 
100 | div {
101 |   padding-bottom: 30px;
102 | }
103 | 

104 |     

105 |     
padding-left

106 |     

107 |       
Define o preenchimento esquerdo do elemento.

108 | 
109 | div {
110 |   padding-left: 40px;
111 | }
112 | 

113 |     

114 |     
padding

115 |     

116 |       
Define o preenchimento geral do elemento. Assim como na margem, o padding pode declarado de várias formas.

117 | 
118 | /* t = topo; d = direita; b = baixo; e = esquerda; */
119 | .div1 {
120 |   /* t = 20px; d = 20px; b = 20px; e = 20px; */
121 |   padding: 20px;
122 | }
123 | .div2 {
124 |   /* t = 10px; d = 20px; b = 10px; e = 20px; */
125 |   padding: 10px 20px;
126 | }
127 | .div3 {
128 |   /* t = 10px; d = 20px; b = 30px; e = 20px; */
129 |   padding: 10px 20px 30px;
130 | }
131 | .div4 {
132 |   /* t = 10px; d = 20px; b = 30px; e = 40px; */
133 |   padding: 10px 20px 30px 40px;
134 | }
135 | 

136 |     

137 |   

138 |     
Esta página está em construção. Volte em breve ou ajude a completá-la!

139 | 

140 | 


--------------------------------------------------------------------------------
/manual/js/inserindo-js.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: Inserindo JS na página?
 4 | ---
 5 | {% include submenu-js.html %}
 6 | 
 7 | 

 8 |   
Inserindo JS na página

 9 |   
Como relacionar um arquivo JavaScript no seu HTML?

10 | 
11 |   
Para adicionar códigos JavaScript à uma página devemos usar a tag <script>, podendo fazer essa inserção de duas formas:

12 | 
13 |   
1. Inserindo códigos na própria página (inline):

14 |   
Cria-se uma tag <script>, informando que o valor do atributo 'type' é 'text/javascript', então, coloca-se o código JavaScript dentro dessa tag.

15 |   
Exemplo:

16 | 
17 | <script type="text/javascript">
18 |   alert('Olá mundo!');
19 | </script>
20 | 

21 | 
22 |   
2. Relacionando um arquivo externo na página:

23 |   
Essa forma é bem parecida com a inserção de códigos JavaScript inline, a maior diferença é que não coloca-se o código JavaScript dentro da tag, visto que esse código estará em um arquivo externo. Assim, simplesmente é preenchido o atributo 'src' da tag <script> com o caminho para o arquivo em questão.

24 |   
Essa forma também permite carregar arquivos JavaScript sem ter que baixá-los para o seu projeto. Isso é bastante utilizado como uma forma de fazer com que arquivos que são usados por muitos projetos, como por exemplo a jQuery, fiquem armazenados em cache, sendo então carregados de forma mais rápida.

25 | 
26 |   
Exemplo 1 - adicionando um JavaScript do nosso projeto:

27 |   
Imagine que o projeto está com a seguinte estrutura de diretórios:

28 |   

29 |     projeto/

30 |       arquivo.html (página que irá adicionar o arquivo JavaScript)

31 |       js/

32 |         meu-arquivo.js
33 |   

34 |   
Assim, se queremos que a página 'arquivo.html' carregue o arquivo 'js/meu-arquivo.js', utilizamos a seguinte marcação:

35 | 
36 | <script type="text/javascript" src="js/meu-arquivo.js"></script>
37 | 

38 | 
39 |   
Exemplo 2 - adicionando um JavaScript da internet:

40 |   
Nesse exemplo, é carregado o framework JavaScript jQuery disponibilizado pela Google por um serviço de hospedagem de libraries (bibliotecas) JavaScript. Disponível em https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery:

41 | 
42 | <script
43 |   type="text/javascript"
44 |   src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
45 | </script>
46 | 

47 | 
48 |   
Qual é o melhor local para colocar a tag <script>?

49 |   
No geral, o melhor local para ser inserida uma tag <script> é antes do fechamento da tag <body>. Isso se dá devido ao fato de que o browser, ao encontrar uma tag <script>, precisa executar o que foi específicado ou dentro da tag ou pelo atributo 'src', bloqueando assim a renderização do restante da página.

50 |   
Assim, o código JavaScript é executado assim que é interpretado, logo, se existem elementos abaixo do código em questão que são manipulados por esse código (por exemplo, quer-se remover todos os links de uma determinada página e os links encontram-se abaixo da tag <script>), é necessário adicionar eventos indicando que a página já foi carregada completamente, caso contrário, é bem possível que o código não funcione corretamente. 

51 | 

52 | 


--------------------------------------------------------------------------------
/slide/css/fonts/lte-ie7.js:
--------------------------------------------------------------------------------
  1 | /* Load this script using conditional IE comments if you need to support IE 7 and IE 6. */
  2 | 
  3 | window.onload = function() {
  4 | 	function addIcon(el, entity) {
  5 | 		var html = el.innerHTML;
  6 | 		el.innerHTML = '' + entity + '' + html;
  7 | 	}
  8 | 	var icons = {
  9 | 			'icon-code' : '',
 10 | 			'icon-file-xml' : '',
 11 | 			'icon-file-css' : '',
 12 | 			'icon-css3' : '',
 13 | 			'icon-office' : '',
 14 | 			'icon-newspaper' : '',
 15 | 			'icon-pencil' : '',
 16 | 			'icon-file' : '',
 17 | 			'icon-file-2' : '',
 18 | 			'icon-file-3' : '',
 19 | 			'icon-file-4' : '',
 20 | 			'icon-copy' : '',
 21 | 			'icon-copy-2' : '',
 22 | 			'icon-copy-3' : '',
 23 | 			'icon-paste' : '',
 24 | 			'icon-stack' : '',
 25 | 			'icon-screen' : '',
 26 | 			'icon-mobile' : '',
 27 | 			'icon-laptop' : '',
 28 | 			'icon-tablet' : '',
 29 | 			'icon-mobile-2' : '',
 30 | 			'icon-tv' : '',
 31 | 			'icon-link' : '',
 32 | 			'icon-attachment' : '',
 33 | 			'icon-eye' : '',
 34 | 			'icon-eye-blocked' : '',
 35 | 			'icon-eye-2' : '',
 36 | 			'icon-grin' : '',
 37 | 			'icon-wink' : '',
 38 | 			'icon-warning' : '',
 39 | 			'icon-notification' : '',
 40 | 			'icon-question' : '',
 41 | 			'icon-info' : '',
 42 | 			'icon-drawer' : '',
 43 | 			'icon-wordpress' : '',
 44 | 			'icon-embed' : '',
 45 | 			'icon-console' : '',
 46 | 			'icon-share' : '',
 47 | 			'icon-html5' : '',
 48 | 			'icon-html5-2' : '',
 49 | 			'icon-firefox' : '',
 50 | 			'icon-chrome' : '',
 51 | 			'icon-opera' : '',
 52 | 			'icon-safari' : '',
 53 | 			'icon-IE' : '',
 54 | 			'icon-bug' : '',
 55 | 			'icon-pie' : '',
 56 | 			'icon-remove' : '',
 57 | 			'icon-settings' : '',
 58 | 			'icon-dashboard' : '',
 59 | 			'icon-meter' : '',
 60 | 			'icon-rocket' : '',
 61 | 			'icon-fire' : '',
 62 | 			'icon-cloud-upload' : '',
 63 | 			'icon-cloud-download' : '',
 64 | 			'icon-tree' : '',
 65 | 			'icon-numbered-list' : '',
 66 | 			'icon-list' : '',
 67 | 			'icon-map' : '',
 68 | 			'icon-download' : '',
 69 | 			'icon-upload' : '',
 70 | 			'icon-box-remove' : '',
 71 | 			'icon-box-add' : '',
 72 | 			'icon-drawer-2' : '',
 73 | 			'icon-location' : '',
 74 | 			'icon-location-2' : '',
 75 | 			'icon-phone-hang-up' : '',
 76 | 			'icon-coin' : '',
 77 | 			'icon-print' : '',
 78 | 			'icon-qrcode' : '',
 79 | 			'icon-podcast' : '',
 80 | 			'icon-feed' : '',
 81 | 			'icon-database' : '',
 82 | 			'icon-github' : '',
 83 | 			'icon-github-2' : '',
 84 | 			'icon-github-3' : '',
 85 | 			'icon-twitter' : '',
 86 | 			'icon-twitter-2' : '',
 87 | 			'icon-download-2' : '',
 88 | 			'icon-upload-2' : '',
 89 | 			'icon-cloud' : '',
 90 | 			'icon-layers' : '',
 91 | 			'icon-layers-alt' : '',
 92 | 			'icon-earth' : '',
 93 | 			'icon-folder' : '',
 94 | 			'icon-folder-open' : '',
 95 | 			'icon-checkmark' : '',
 96 | 			'icon-checkmark-2' : '',
 97 | 			'icon-close' : ''
 98 | 		},
 99 | 		els = document.getElementsByTagName('*'),
100 | 		i, attr, html, c, el;
101 | 	for (i = 0; ; i += 1) {
102 | 		el = els[i];
103 | 		if(!el) {
104 | 			break;
105 | 		}
106 | 		attr = el.getAttribute('data-icon');
107 | 		if (attr) {
108 | 			addIcon(el, attr);
109 | 		}
110 | 		c = el.className;
111 | 		c = c.match(/icon-[^\s'"]+/);
112 | 		if (c && icons[c[0]]) {
113 | 			addIcon(el, icons[c[0]]);
114 | 		}
115 | 	}
116 | };


--------------------------------------------------------------------------------
/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Breaks {@code job.sourceCode} around style boundaries in
  3 |  * {@code job.decorations} and modifies {@code job.sourceNode} in place.
  4 |  * @param {Object} job like 
{
  5 |  *    sourceCode: {string} source as plain text,
  6 |  *    spans: {Array.} alternating span start indices into source
  7 |  *       and the text node or element (e.g. {@code 
}) corresponding to that
  8 |  *       span.
  9 |  *    decorations: {Array.
 12 |  * @private
 13 |  */
 14 | function recombineTagsAndDecorations(job) {
 15 |   var isIE = /\bMSIE\b/.test(navigator.userAgent);
 16 |   var newlineRe = /\n/g;
 17 | 
 18 |   var source = job.sourceCode;
 19 |   var sourceLength = source.length;
 20 |   // Index into source after the last code-unit recombined.
 21 |   var sourceIndex = 0;
 22 | 
 23 |   var spans = job.spans;
 24 |   var nSpans = spans.length;
 25 |   // Index into spans after the last span which ends at or before sourceIndex.
 26 |   var spanIndex = 0;
 27 | 
 28 |   var decorations = job.decorations;
 29 |   var nDecorations = decorations.length;
 30 |   // Index into decorations after the last decoration which ends at or before
 31 |   // sourceIndex.
 32 |   var decorationIndex = 0;
 33 | 
 34 |   // Remove all zero-length decorations.
 35 |   decorations[nDecorations] = sourceLength;
 36 |   var decPos, i;
 37 |   for (i = decPos = 0; i < nDecorations;) {
 38 |     if (decorations[i] !== decorations[i + 2]) {
 39 |       decorations[decPos++] = decorations[i++];
 40 |       decorations[decPos++] = decorations[i++];
 41 |     } else {
 42 |       i += 2;
 43 |     }
 44 |   }
 45 |   nDecorations = decPos;
 46 | 
 47 |   // Simplify decorations.
 48 |   for (i = decPos = 0; i < nDecorations;) {
 49 |     var startPos = decorations[i];
 50 |     // Conflate all adjacent decorations that use the same style.
 51 |     var startDec = decorations[i + 1];
 52 |     var end = i + 2;
 53 |     while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
 54 |       end += 2;
 55 |     }
 56 |     decorations[decPos++] = startPos;
 57 |     decorations[decPos++] = startDec;
 58 |     i = end;
 59 |   }
 60 | 
 61 |   nDecorations = decorations.length = decPos;
 62 | 
 63 |   var decoration = null;
 64 |   while (spanIndex < nSpans) {
 65 |     var spanStart = spans[spanIndex];
 66 |     var spanEnd = spans[spanIndex + 2] || sourceLength;
 67 | 
 68 |     var decStart = decorations[decorationIndex];
 69 |     var decEnd = decorations[decorationIndex + 2] || sourceLength;
 70 | 
 71 |     var end = Math.min(spanEnd, decEnd);
 72 | 
 73 |     var textNode = spans[spanIndex + 1];
 74 |     var styledText;
 75 |     if (textNode.nodeType !== 1  // Don't muck with 
s or 
  • s
 76 |         // Don't introduce spans around empty text nodes.
 77 |         && (styledText = source.substring(sourceIndex, end))) {
 78 |       // This may seem bizarre, and it is.  Emitting LF on IE causes the
 79 |       // code to display with spaces instead of line breaks.
 80 |       // Emitting Windows standard issue linebreaks (CRLF) causes a blank
 81 |       // space to appear at the beginning of every line but the first.
 82 |       // Emitting an old Mac OS 9 line separator makes everything spiffy.
 83 |       if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
 84 |       textNode.nodeValue = styledText;
 85 |       var document = textNode.ownerDocument;
 86 |       var span = document.createElement('SPAN');
 87 |       span.className = decorations[decorationIndex + 1];
 88 |       var parentNode = textNode.parentNode;
 89 |       parentNode.replaceChild(span, textNode);
 90 |       span.appendChild(textNode);
 91 |       if (sourceIndex < spanEnd) {  // Split off a text node.
 92 |         spans[spanIndex + 1] = textNode
 93 |             // TODO: Possibly optimize by using '' if there's no flicker.
 94 |             = document.createTextNode(source.substring(end, spanEnd));
 95 |         parentNode.insertBefore(textNode, span.nextSibling);
 96 |       }
 97 |     }
 98 | 
 99 |     sourceIndex = end;
100 | 
101 |     if (sourceIndex >= spanEnd) {
102 |       spanIndex += 2;
103 |     }
104 |     if (sourceIndex >= decEnd) {
105 |       decorationIndex += 2;
106 |     }
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations_test.html:
--------------------------------------------------------------------------------
 1 | 
 2 |  
 3 | Recombine Tags And Decorations
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
16 | 
17 | 
18 | 
19 | 
    Recombine Tags And Decorations
    
20 | 
21 | 
22 |   
23 |   
24 |     
25 |     
26 |     
27 |   
28 |   
29 |   
30 |     
31 |     
32 |     
33 |   
34 |   
35 |   
36 |     
37 |     
38 |     
39 |   
40 | 
    Test Single Decoration
    "Hello, World!"[0, 'str']"Hello, World!"
    Test Single Span
    print "Hello, <World>!";[0, 'kwd', 5, 'pln', 6, 'str', 14, 'tag', 21, 'str', 23, 'pun']print "Hello, <World>!";
    Test Interleaved
    print "Hello, <World>!";[0, 'kwd', 5, 'pln', 6, 'str', 14, 'tag', 21, 'str', 23, 'pun']print "Hello, <World>!";
    
41 | 
42 | 
94 | 
95 | 
    
96 | 
    
97 |  Last modified: Tue Mar 29 10:41:34 PDT 2011 
98 |  
99 | 


--------------------------------------------------------------------------------
/slide/css/functional-classes.css:
--------------------------------------------------------------------------------
  1 | /** 
  2 | *** FLOAT E CLEAR
  3 | **/
  4 | .noFloat {float: none !important;}
  5 | .fRight {float: right !important;}
  6 | .fLeft {float: left !important;}
  7 | 
  8 | .cBoth {clear: both !important;}
  9 | .cRight {clear: right !important;}
 10 | .cLeft {clear: left !important;}
 11 | 
 12 | .overflowHidden { overflow: hidden !important;}
 13 | .overflowVisible {overflow: visible !important;}
 14 | 
 15 | /** 
 16 | *** BLOCO E LINHA
 17 | **/
 18 | .dBlock {display: block !important;}
 19 | .dInline {display: inline !important; float: none !important;}
 20 | .dInlineBlock {display: inline-block !important; float: none !important;}
 21 | .dNone, .hide {display: none !important;}
 22 | 
 23 | /** 
 24 | *** TAMANHO
 25 | **/
 26 | .widthAuto {width: auto !important;}
 27 | .widthInherit {width: inherit;}
 28 | .heightInherit {height: inherit;}
 29 | .heightAuto {height: auto !important;}
 30 | 
 31 | /** 
 32 | *** MARGIN E PADDING
 33 | **/
 34 | .noMargin {margin: 0 !important;}
 35 | .noMarginLeft, .row.noMarginLeft {margin-left: 0 !important;}
 36 | .noMarginRight {margin-right: 0 !important;}
 37 | .noMarginTop {margin-top: 0 !important;}
 38 | .noMarginBottom {margin-bottom: 0 !important;}
 39 | 
 40 | .noPadding {padding: 0 !important;}
 41 | .noPaddingLeft {padding-left: 0 !important;}
 42 | .noPaddingRight {padding-right: 0 !important;}
 43 | .noPaddingTop {padding-top: 0 !important;}
 44 | .noPaddingBottom {padding-bottom: 0 !important;}
 45 | 
 46 | .marginAuto {
 47 |   margin-left: auto !important;
 48 |   margin-right: auto !important;
 49 | }
 50 | 
 51 | .marginBottom40 {margin-bottom: 40px;}
 52 | 
 53 | /** 
 54 | *** ALINHAMENTO DE TEXTO
 55 | **/
 56 | .txtLeft {text-align: left !important;}
 57 | .txtRight {text-align: right !important;}
 58 | .txtJustify {text-align: justify !important;}
 59 | .txtCenter {text-align: center !important;}
 60 | 
 61 | table.txtLeft td, table.txtLeft th {text-align: left;}
 62 | table.txtRight td, table.txtRight th {text-align: right;}
 63 | 
 64 | /** 
 65 | *** ALINHAMENTO VERTICAL
 66 | **/
 67 | .vAlignTop {vertical-align: top !important;}
 68 | .vAlignMiddle {vertical-align: middle !important;}
 69 | .vAlignBottom {vertical-align: bottom !important;}
 70 | .vAlignTopImportant {vertical-align: top  !important;}
 71 | .vAlignMiddleImportant {vertical-align: middle  !important;}
 72 | .vAlignBottomImportant {vertical-align: bottom  !important;}
 73 | 
 74 | /** 
 75 | *** BACKGROUND E BORDA
 76 | **/
 77 | .noBackground {background: none !important;}
 78 | .noShadow {box-shadow: none !important;}
 79 | 
 80 | .noBorder {border: none !important;}
 81 | .noBorderRight {border-right: none !important;}
 82 | .noBorderLeft {border-left: none !important;}
 83 | .noBorderBottom {border-bottom: none !important;}
 84 | .noBorderTop {border-top: none !important;}
 85 | 
 86 | .noBullet, .noListStyle {list-style: none !important;}
 87 | 
 88 | /** 
 89 | *** CURSOR DE MOUSE
 90 | **/
 91 | .cursorPointer {cursor: pointer !important;}
 92 | .cursorDefault {cursor: default !important;}
 93 | .cursorCrosshair {cursor: crosshair !important;}
 94 | .cursorMove {cursor: move !important;}
 95 | .cursorHelp {cursor: help !important;}
 96 | .cursorWait {cursor: wait !important;}
 97 | .cursorInherit {cursor: inherit !important;}
 98 | .cursorText {cursor: text !important;}
 99 | .cursorProgress {cursor: progress !important;}
100 | 
101 | .cursorGrab {
102 |   cursor: hand;
103 |   cursor: grab;
104 |   cursor: -o-grab;
105 |   cursor: -ms-grab;
106 |   cursor: -moz-grab;
107 |   cursor: -webkit-grab;
108 | }
109 | .cursorGrabbing {
110 |   cursor: grabbing;
111 |   cursor: -o-grabbing;
112 |   cursor: -ms-grabbing;
113 |   cursor: -moz-grabbing;
114 |   cursor: -webkit-grabbing;
115 | }
116 | 
117 | .ellipsis {
118 |   overflow: hidden;
119 |   text-overflow: ellipsis;
120 |   white-space: nowrap;
121 |   display: inline-block  !important;
122 | }
123 | .noBold {font-weight: normal!important;}
124 | .noBgHover {background: none!important;}
125 | .noRadius{
126 |   border-radius: 0!important;
127 |   -moz-border-radius: 0!important;
128 |   -webkit-border-radius: 0!important;
129 | }
130 | 
131 | /** COLORS **/
132 | .bgWhite {background: white!important;}
133 | .colorBlack {color: #000!important;}
134 | 
135 | /**
136 | *** INPUTS
137 | **/
138 | .noSpin::-webkit-inner-spin-button {-webkit-appearance: none;}
139 | 
140 | /** 
141 | *** HR - LINHA HORIZONTAL
142 | **/
143 | hr, hr.sepDot {border: none; border-bottom: 1px solid #e5e5e5; background: none; display: block; margin: 15px 0;}


--------------------------------------------------------------------------------
/manual/css/background.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: interna
  3 | title: Propriedade Background
  4 | ---
  5 | {% include submenu-css.html %}
  6 | 
  7 | 
    
  8 |   
    Propriedade Background
    
  9 |   
    Inserindo fundo nos elementos
    
 10 |   
    O background trata do fundo dos elementos. O elemento que mais recebe esta propriedade é o body.
    
 11 |   
    As propriedades do background são:
    
 12 |   
    
 13 |     
    color
    
 14 |     
    
 15 |       
    Define a cor do fundo.
    
 16 |       
    Possíveis valores:
    
 17 |       
      
 18 |         
    • inherit: Herda o valor do elemento pai.
      • 
 19 |         
    • transparent: Define cor como transparente.
      • 
 20 |         
    • <cor>: Define uma determinada cor.
      • 
 21 |       
    
 22 | 
     23 | div {
 24 |   background-color: gray;
 25 | }
 26 | 
    
 27 |     
    
 28 |     
    image
    
 29 |     
    
 30 |       
    Define a imagem de fundo.
    
 31 |       
    Possíveis valores:
    
 32 |       
      
 33 |         
    • inherit: Herda o valor do elemento pai.
      • 
 34 |         
    • none: Indica que não há imagem de fundo.
      • 
 35 |         
    • url(): Define a localização da imagem de fundo.
      • 
 36 |       
    
 37 | 
     38 | div {
 39 |   background-image: url("../img/bg.png");
 40 | }
 41 | 
    
 42 |     
    
 43 |     
    repeat
    
 44 |     
    
 45 |       
    Define a posição de repetição da imagem de fundo.
    
 46 |       
    Possíveis valores:
    
 47 |       
      
 48 |         
    • inherit: Herda o valor do elemento pai.
      • 
 49 |         
    • repeat: Repete a imagem vertical e horizontalmente.
      • 
 50 |         
    • repeat-x: Repete a imagem horizontalmente.
      • 
 51 |         
    • repeat-y: Repete a imagem verticalmente.
      • 
 52 |         
    • no-repeat: Não repete a imagem.
      • 
 53 |       
    
 54 | 
     55 | div {
 56 |   background-repeat: no-repeat;
 57 | }
 58 | 
    
 59 |     
    
 60 |     
    attachment
    
 61 |     
    
 62 |       
    Define se a imagem definida irá rolar juntamente com o viewport, ou se irá ficar fixo.
    
 63 |       
    Possíveis valores:
    
 64 |       
      
 65 |         
    • inherit: Herda o valor do elemento pai.
      • 
 66 |         
    • fixed: Mantém a imagem de fundo fixa na posição definida independente da rolagem do viewport.
      • 
 67 |         
    • scroll: A imagem de fundo acompanha a rolagem do viewport.
      • 
 68 |       
    
 69 | 
     70 | div {
 71 |   background-attachment: fixed;
 72 | }
 73 | 
    
 74 |     
    
 75 |     
    position
    
 76 |     
    
 77 |       
    Define a posição da imagem de fundo. Observe que esta propriedade necessita de atenção de acordo com o background-repeat definido.
    
 78 |       
    Possíveis valores:
    
 79 |       
      
 80 |         
    • inherit: Herda o valor do elemento pai.
      • 
 81 |         
    • <porcentagem>: sendo A e B dois números, quando declaramos o position com A% e B%, a posição A,B da imagem ficará na posição A%, B% do elemento.
      • 
 82 |         
    • <comprimento>: sendo A e B dois números, quando declaramos o position com Apx e Bpx, a posição A,B da imagem ficará na posição Apx, Bpx do elemento.
      • 
 83 |         
    • top: Equivale a 0% na posição vertical.
      • 
 84 |         
    • bottom: Equivale a 100% na posição vertical.
      • 
 85 |         
    • left: Equivale a 0% na posição horizontal.
      • 
 86 |         
    • right: Equivale a 100% na posição horizontal.
      • 
 87 |         
    • center: Caso não tenha sido declarado um valor horizontal, equivale a 50% na posição horizontal, ou, caso não tenha sido declarado um valor vertical, equivale a 50% na posição vertical.
      • 
 88 |       
    
 89 | 
     90 | div {
 91 |   background-position: top center;
 92 | }
 93 | 
    
 94 |     
    
 95 |     
    background
    
 96 |     
    
 97 |       
    É uma propriedade abreviada que une todas as propriedades do background.
    
 98 | 
     99 | div {
100 |   background: gray url("../img/bg.png") no-repeat fixed top center;
101 | }
102 | 
    
103 |     
    
104 |   
    
105 |   
    Esta página está em construção. Volte em breve ou ajude a completá-la!
    
106 | 
    
107 | 


--------------------------------------------------------------------------------
/manual/js/funcoes.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: Funções
 4 | ---
 5 | {% include submenu-js.html %}
 6 | 
 7 | 
    
 8 |   
    Funções
    
 9 |   
    Criando e usando funções personalizadas
    
10 | 
11 |   
    Inicialmente, pense em funções como caixinhas mágicas: você joga coisas dentro, algo acontece e você recebe de volta uma transformação do que foi colocado. Por exemplo: imagine uma caixinha em que você coloca dois números: 3 e 5 e a caixa te devolve 8.
    
12 | 
13 |   
    Os números 3 e 5 que colocamos dentro da caixa iremos chamar de argumentos e o 8 que recebemos, iremos chamar de retorno.
    
14 | 
15 |   
    Nem sempre uma função terá argumentos e nem sempre terá um retorno, mas certamente ela irá realizar alguma coisa de nosso interesse, seja mudar a cor de algum elemento, abrir uma janela popup, ou qualquer uma das outras coisas que a linguagem JavaScript pode fazer.
    
16 | 
17 |   
    As linguagens de programação já possuem algumas funções pré-definidas para nos ajudar. Da linguagem JavaScript podemos citar: open()(usada para abrir janelas popup), parseInt() (usada para converter um número ou string em inteiro), encodeURI() (codifica uma cadeia de caracteres em um URI válido)... 
    
18 | 
19 |   
    Resolvendo problemas
    
20 | 
21 |   
    Sempre que estivermos programando em qualquer linguagem, temos que ter em mente uma coisa muito importante: "o melhor jeito de resolver um problema grande é dividi-lo em problemas menores", cada um desses "problemas menores" serão resolvidos por funções pequenas, assim juntando as várias pequenas funções, teremos resolvido "o todo".
    
22 | 
23 |   
    Apesar de ser possível escrever todo o código que resolve o problema grande numa única função gigante, não fazemos isso. Pois isso tornaria muito complexo nosso código, dificultaria uma futura manutenção e impossibilitaria o reaproveitamento de pequenas rotinas. Por isso preferimos dividir e depois criar uma função grande que utilize nossas outras funções pequenas, do que escrever tudo num só lugar.
    
24 | 
25 |   
    Declarando
    
26 | 
27 |   
    A declaração de uma função é quando construimos a caixa mágica.
    
28 | 
29 | 
    30 | function foo() {
31 |   //corpo
32 | }
33 | 
    
34 | 
35 |   
    foo é o nome da função e o código entre as chaves {}, é o corpo da nossa função. A palavra function é a forma da linguagem JavaScript indicar que estamos declarando uma função (criando a caixa mágica).
    
36 | 
37 |   
    Invocando
    
38 | 
39 |   
    Após construirmos a caixa, ela por si só não faz absolutamente nada até a chamarmos. A invocação consiste em colocar o nome da função seguido pelos parênteses. Isso faz com que o código dentro do corpo da nossa função seja executado.
    
40 | 
    41 | foo();
42 | 
    
43 | 
44 |   
    Experimente salvar um arquivo .html e abrir com o seu navegador, contendo o seguinte código:
    
45 | 
    46 | <script>
47 | function bar() {
48 |   alert('Hello World');
49 | }
50 | </script>
51 | 
    
52 |   
    Após abrir o arquivo com qualquer navegador, você irá notar que não irá acontecer absolutamente nada. Sim, nada. Pois ainda não invocamos a função. Apenas a declaramos. Para invocar, o arquivo ficaria com o seguinte conteúdo:
    
53 | 
54 | 
    55 | <script>
56 | // declarando
57 | function bar() {
58 |   alert('Hello World');
59 | }
60 | 
61 | // invocando
62 | bar();
63 | </script>
64 | 
    
65 | 
66 |   
    Exemplo de função com argumentos e retorno
    
67 | 
68 |   
    Lembram que eu iniciei o texto falando de uma caixa mágica que recebia 2 números e devolvia a soma deles ? Essa função ficaria assim:
    
69 | 
    70 | function somar(x, y) {
71 |   return x + y;
72 | }
73 | 
    
74 |   
    E para invocar essa função somar() podemos passar quaisquer dois números:
    
75 | 
    76 | somar(3, 5);
77 | somar(1, 2);
78 | somar(10, 32);
79 | 
    
80 |   
    Só que não vermos nada, pois não direcionamos o return para lugar nenhum.
    
81 | 
82 | 
    83 | <p id="resultado"></p>
84 | <p id="resultado2"></p>
85 | <script>
86 | alert(somar(3, 5));
87 | document.getElementById('resultado').innerHTML = somar(1, 2);
88 | document.getElementById('resultado2').innerHTML = somar(10, 32);
89 | </script>
90 | 
    
91 | 
    
92 | 


--------------------------------------------------------------------------------
/manual/js/operadores.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: interna
  3 | title: Operadores
  4 | ---
  5 | {% include submenu-js.html %}
  6 | 
  7 | 
    
  8 |   
    Operadores
    
  9 |   
    Os operadores vão nos permitir fazer operações(mesmo!? Não me diga...) matemáticas, de comparação e lógicas
    
 10 | 
 11 |   
    Aritiméticos
    
 12 |   
    Para as operações matemáticas básicas são utilizados os seguintes, adição(+), subtração(-), multiplicação(*) e divisão(/).
 13 | 	
     14 | //Adição
 15 | 2+2 //4
 16 | 2.3+4 //6.3
 17 | 1.5+1.5 //3
 18 | 
 19 | //Subtração
 20 | 2-2 //0
 21 | 8-5 //-8
 22 | 3.2-1 //2.2
 23 | 
 24 | //Multiplicação
 25 | 2*3 //6
 26 | 1.5*2 //3
 27 | 
 28 | //Divisão
 29 | 1/2 //0.5
 30 | 1.5/2 //0.75
 31 | 2/0 //Infinity
 32 | 	
    
 33 |   
    
 34 |   
    Você notou que podemos ter resultados com casas decimais e que é retornada a constante Infinity em qualquer número divido por zero.
    
 35 |   
    Além dos desses operadores básicos temos outros operadores bem úteis:
    
 36 |   
    
 37 |   	
    Resto (%)
    
 38 |   	
    Retorna o resto inteiro da divisão.
 39 | 		
     40 | 5%4 //1
 41 | 4%5 //4
 42 | 		
    
 43 |   	
    
 44 |   	
    Incremento (++)
    
 45 |   	
    Adiciona um a variável. Se utilizado antes(++x) adiciona um e retorna o valor, caso o operador seja utilizado depois da variável(x++) retorna o valor e adiciona um.
 46 | 		
     47 | var x = 1;
 48 | ++x //2
 49 | x++ //2
 50 | 		
    
 51 |   	
    
 52 |   	
    Decremento (--)
    
 53 |   	
    O comportamento desse operador é parecido com o de incremento(acho que você já entendeu).Ele subtrai um da variável. Se utilizado antes(--x) subtrai um e retorna o valor, caso o operador seja utilizado depois da variável(x--) retorna o valor e subtrai um.
 54 | 		
     55 | var x = 2;
 56 | --x //1
 57 | x-- //1
 58 | 		
    
 59 |   	
    
 60 |   
    
 61 |   
    De comparaçao
    
 62 |   
    
 63 |   	
    Igual (==)
    
 64 |   	
    Retorna verdadeiro se os valores comparados forem iguais.
 65 | 		
     66 | 1=='1' //true
 67 | 		
    
 68 |   	
    
 69 |   	
    Não igual (!=)
    
 70 |   	
    Retorna verdadeiro se os valores comparados não forem iguais. Esse operador também pode ser chamado de diferente de.
 71 | 		
     72 | 4!=1 //true
 73 | 		
    
 74 |   	
    
 75 |   	
    Igual estrito (===)
    
 76 |   	
    Esse operador é mais severo, só retorna verdadeiro se o valor e o tipo comparados forem iguais.
 77 | 		
     78 | 3==='3' //false
 79 | 3===3 //true
 80 | 		
    
 81 |   	
    
 82 |   	
    Não igual estrito (!==)
    
 83 |   	
    Não se engane, esse operador vai retornar verdadeiro se os valores e ou os tipos forem diferentes
 84 | 		
     85 | 3!=='3' //true
 86 | 3!==3 //false
 87 | 3!==4 //true
 88 | 		
    
 89 |   	
    
 90 |     
    Maior que (>)
    
 91 |     
    Compara se o operador da esquerda é maior que o da direita. Caso seja retorna verdadeiro
 92 |     
     93 | 1>2 //false
 94 | 5>3 //true
 95 | 4>'1' //true
 96 |     
    
 97 |     
    Maior ou igual que (>=)
    
 98 |     
    Compara se o operador da esquerda é maior ou igual ao da direita. Caso seja retorna verdadeiro
 99 |     
    100 | 1>=2 //false
101 | 5>=3 //true
102 | 4>='1' //true
103 | 2>=2 // true
104 |     
    
105 |     
    
106 |     
    Menor que (<)
    
107 |     
    Compara se o operador da esquerda é menor que o da direita. Caso seja retorna verdadeiro
108 |     
    109 | 1<2 //true
110 | 5<3 //false
111 | 4<'1' //false
112 |     
    
113 |     
    
114 |     
    Menor ou igual que (<=)
    
115 |     
    Compara se o operador da esquerda é menor ou igual ao da direita. Caso seja retorna verdadeiro
116 |     
    117 | 1<=2 //true
118 | 5<=3 //false
119 | 4<='1' //false
120 | 2<=2 // true
121 |     
    
122 |     
    
123 |   
    
124 |   
    Lógicos
    
125 |   
    Operadores lógicos são utilizados normalmente com expressões que retornam verdadeiro ou falso, entretanto caso seja utilizado com valores não booleanos o retorno será não booleano
    
126 | 
127 |   
    Esta página está em construção. Volte em breve ou ajude a completá-la!
    
128 | 
    
129 | 


--------------------------------------------------------------------------------
/manual/js/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: O que é JavaScript?
 4 | ---
 5 | {% include submenu-js.html %}
 6 | 
 7 | 
    
 8 |   
    O que é JavaScript?
    
 9 |   
    Controlando o comportamento do HTML e o CSS
    
10 | 
11 |   
    JavaScript não é Java
    
12 |   
    A primeira coisa que você precisa saber: JavaScript não tem nada a ver com Java. Java é uma linguagem server-side, como PHP, Ruby, Python e tantas outras. A única coisa parecida entre eles é o nome. ;-)
    
13 | 
14 |   
    Sabendo disso, quero que saiba que JavaScript é uma linguagem de programação client-side. Ela é utilizada para controlar o HTML e o CSS para manipular comportamentos na página. Me pergunte agora: "Como assim comportamento?". Agora eu respondo: um comportamento comum, por exemplo, é um submenu. Sabe quando você passa o mouse em um ítem do menu, e aparece um submenu com vários outros ítens? Pois é. A obrigação de fazer aparecer esse submenu é do JavaScript. O submenu estava escondido, e quando passamos o mouse no ítem, o submenu aparece. Todo esse comportamento quem vai executar é o JavaScript.
    
15 | 
16 |   
    Quem criou o JavaScript?
    
17 |   
    O JavaScript não foi criado pelo W3C, como muitos pensam. Na verdade ele foi criado por um cara chamado Brendan Eich na Netscape (um dos precursores dos navegadores web). Ele se chamava LiveScript, mas logo seu nome foi mudado para JavaScript. Mesmo assim o nome original é ECMAScript, por que o JavaScript é mantido pela European Computer Manufacturer's Association. Ou seja, chame de JavaScript mesmo, que é como todo mundo chama.
    
18 | 
19 |   
    Voltando ao assunto principal: o JavaScript não é mantido pelo W3C, ele é uma linguagem criada e mantida pela ECMA. Eles mantém uma documentação da linguagem no site deles, mas a melhor documentação ainda são os materiais que você pode encontrar na web mesmo.
    
20 | 
21 |   
    Camada de comportamento
    
22 |   
    Você já deve ter lido a parte que fala sobre o desenvolvimento separando em camadas, onde explicamos que existem três camadas básicas no desenvolvimento para Web: a informação que fica com o HTML, a formatação, que fica com o CSS e o comportamento, que fica com o JavaScript.
    
23 |   
    O JavaScript é a terceira camada de desenvolvimento por que ele manipula as duas primeiras camadas, isto é: HTML e CSS. Imagine que você precise de um Slider de imagens. Toda a movimentação, ações de cliques nas setinhas e etc, é o JavaScript que vai cuidar. É isso que chamamos de comportamento.
    
24 | 
25 |   
    Orientado a Objeto
    
26 |   
    Talvez seja cedo demais para falar sobre orientação a objetos em linguagens de programação, mas você precisa saber, pelo menos, que o JavaScript é uma linguagem com Orientação a Objetos. Não vamos entrar em detalhes agora, não queremos que você confunda as bolas. Mas saiba que um objeto na programação é um conjunto de informações. Objeto é um grupo de dados. Mas por hora, fique apenas com essas informações. Vamos nos aprofundar em momento oportuno.
    
27 | 
28 |   
    Hello World!
    
29 |   
    Vamos fazer seu primeiro Hello World com JavaScript?
    
30 |   
    Primeiro, escreva a estrutura básica do HTML:
    
31 | 
    32 | <!DOCTYPE html>
33 | <html lang="pt-br">
34 |   <head>
35 |     <title>Título</title>
36 |     <meta charset="utf-8">
37 |   </head>
38 |   <body>
39 | 
40 |   </body>
41 | </html>
42 | 
    
43 | 
44 |   
    Agora, antes do </body> coloque este código:
    
45 | 
    46 | <script type="text/javascript">
47 |   alert('Hello World!');
48 | </script>
49 | 
    
50 | 
51 |   
    O código final fica assim:
    
52 | 
    53 | <!DOCTYPE html>
54 | <html lang="pt-br">
55 |   <head>
56 |     <title>Título</title>
57 |     <meta charset="utf-8">
58 |   </head>
59 |   <body>
60 | 
61 |   <script type="text/javascript">
62 |     alert('Hello World!');
63 |   </script>
64 |   </body>
65 | </html>
66 | 
    
67 |   
    E pronto, você já escreveu seu primeiro código JavaScript. Abra esse documento HTML no browser e você vai ver uma janela de alerta aparecendo.
    
68 | 
69 |   
    Você pode entender também tudo o que envolve o JavaScript nessa simples apresentação:
    
70 |   
71 | 
72 |   
    Seria interessante você entender melhor como que se insere um JavaScript na sua página.
    
73 | 
    
74 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/src/lang-hs.js:
--------------------------------------------------------------------------------
  1 | // Copyright (C) 2009 Google Inc.
  2 | //
  3 | // Licensed under the Apache License, Version 2.0 (the "License");
  4 | // you may not use this file except in compliance with the License.
  5 | // You may obtain a copy of the License at
  6 | //
  7 | //      http://www.apache.org/licenses/LICENSE-2.0
  8 | //
  9 | // Unless required by applicable law or agreed to in writing, software
 10 | // distributed under the License is distributed on an "AS IS" BASIS,
 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | // See the License for the specific language governing permissions and
 13 | // limitations under the License.
 14 | 
 15 | 
 16 | 
 17 | /**
 18 |  * @fileoverview
 19 |  * Registers a language handler for Haskell.
 20 |  *
 21 |  *
 22 |  * To use, include prettify.js and this file in your HTML page.
 23 |  * Then put your code in an HTML tag like
 24 |  *      
    (my lisp code)
    
 25 |  * The lang-cl class identifies the language as common lisp.
 26 |  * This file supports the following language extensions:
 27 |  *     lang-cl - Common Lisp
 28 |  *     lang-el - Emacs Lisp
 29 |  *     lang-lisp - Lisp
 30 |  *     lang-scm - Scheme
 31 |  *
 32 |  *
 33 |  * I used http://www.informatik.uni-freiburg.de/~thiemann/haskell/haskell98-report-html/syntax-iso.html
 34 |  * as the basis, but ignore the way the ncomment production nests since this
 35 |  * makes the lexical grammar irregular.  It might be possible to support
 36 |  * ncomments using the lookbehind filter.
 37 |  *
 38 |  *
 39 |  * @author mikesamuel@gmail.com
 40 |  */
 41 | 
 42 | PR['registerLangHandler'](
 43 |     PR['createSimpleLexer'](
 44 |         [
 45 |          // Whitespace
 46 |          // whitechar    ->    newline | vertab | space | tab | uniWhite
 47 |          // newline      ->    return linefeed | return | linefeed | formfeed
 48 |          [PR['PR_PLAIN'],       /^[\t\n\x0B\x0C\r ]+/, null, '\t\n\x0B\x0C\r '],
 49 |          // Single line double and single-quoted strings.
 50 |          // char         ->    ' (graphic<' | \> | space | escape<\&>) '
 51 |          // string       ->    " {graphic<" | \> | space | escape | gap}"
 52 |          // escape       ->    \ ( charesc | ascii | decimal | o octal
 53 |          //                        | x hexadecimal )
 54 |          // charesc      ->    a | b | f | n | r | t | v | \ | " | ' | &
 55 |          [PR['PR_STRING'],      /^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,
 56 |           null, '"'],
 57 |          [PR['PR_STRING'],      /^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,
 58 |           null, "'"],
 59 |          // decimal      ->    digit{digit}
 60 |          // octal        ->    octit{octit}
 61 |          // hexadecimal  ->    hexit{hexit}
 62 |          // integer      ->    decimal
 63 |          //               |    0o octal | 0O octal
 64 |          //               |    0x hexadecimal | 0X hexadecimal
 65 |          // float        ->    decimal . decimal [exponent]
 66 |          //               |    decimal exponent
 67 |          // exponent     ->    (e | E) [+ | -] decimal
 68 |          [PR['PR_LITERAL'],
 69 |           /^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,
 70 |           null, '0123456789']
 71 |         ],
 72 |         [
 73 |          // Haskell does not have a regular lexical grammar due to the nested
 74 |          // ncomment.
 75 |          // comment      ->    dashes [ any {any}] newline
 76 |          // ncomment     ->    opencom ANYseq {ncomment ANYseq}closecom
 77 |          // dashes       ->    '--' {'-'}
 78 |          // opencom      ->    '{-'
 79 |          // closecom     ->    '-}'
 80 |          [PR['PR_COMMENT'],     /^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],
 81 |          // reservedid   ->    case | class | data | default | deriving | do
 82 |          //               |    else | if | import | in | infix | infixl | infixr
 83 |          //               |    instance | let | module | newtype | of | then
 84 |          //               |    type | where | _
 85 |          [PR['PR_KEYWORD'],     /^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/, null],
 86 |          // qvarid       ->    [ modid . ] varid
 87 |          // qconid       ->    [ modid . ] conid
 88 |          // varid        ->    (small {small | large | digit | ' })
 89 |          // conid        ->    large {small | large | digit | ' }
 90 |          // modid        ->    conid
 91 |          // small        ->    ascSmall | uniSmall | _
 92 |          // ascSmall     ->    a | b | ... | z
 93 |          // uniSmall     ->    any Unicode lowercase letter
 94 |          // large        ->    ascLarge | uniLarge
 95 |          // ascLarge     ->    A | B | ... | Z
 96 |          // uniLarge     ->    any uppercase or titlecase Unicode letter
 97 |          [PR['PR_PLAIN'],  /^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],
 98 |          // matches the symbol production
 99 |          [PR['PR_PUNCTUATION'], /^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]
100 |         ]),
101 |     ['hs']);
102 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/js-modules/numberLines_test.html:
--------------------------------------------------------------------------------
  1 | 
  2 |  
  3 | Number Lines Test
  4 | 
  5 | 
  6 | 
 12 | 
 13 | 
 14 | 
 15 | 
    Number Lines Test
    
 16 | 
 17 | 
 18 |   
 19 |   
 20 |     
 21 |     
 22 |   
 23 |   
 24 |   
 25 |     
 26 |     
 27 |   
 28 |   
 29 |   
 30 |     
 31 |     
 32 |   
 33 |   
 34 |   
 35 |     
 36 |     
 37 |   
 38 |   
 39 |   
 40 |     
 41 |     
 42 |   
 43 |   
 44 |   
 45 |     
 46 |     
 47 |   
 48 |   
 49 |   
 50 |     
 51 |     
 52 |   
 53 |   
 54 |   
 55 |     
 56 |     
 57 |   
 58 | 
    Test Nothing to Split
    Hello, World!
    1. Hello, World!
    Test Normalized Spaces
    Hello,
World!
    1. Hello,
World!
    Test BR
    Hello,
    World!
    1. Hello,
    2. World!
    Test line breaks
    Hello,
there
World!
    1. Hello,
    2. there
    3. World!
    Test line breaks with followers
    Hello,
there
World!

    1. Hello,
    2. there
    3. World!
    Test nocode
    Hello,
there
World!
    1. Hello,
    2. there
World!
    Test link
    Hello,
there
World!
    1. Hello,
    2. there
    3. World!
    Test blank lines
    One

Three
    1. One
    2.  
    3. Three
    
 59 | 
 60 | 
115 | 
116 | 
    
117 | 
    
118 |  Last modified: Tue Mar 29 16:44:05 PDT 2011 
119 |  
120 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/js-modules/extractSourceSpans_test.html:
--------------------------------------------------------------------------------
  1 | 
  2 |  
  3 | Extract Source Spans Test
  4 | 
  5 | 
  6 | 
 17 | 
 18 | 
 19 | 
 20 | 
    Extract Source Spans Test
    
 21 | 
 22 | 
 23 |   
 24 |   
 25 |     
 26 |     
 27 |   
 28 |   
 29 |   
 30 |     
 31 |     
 32 |   
 33 |   
 34 |   
 35 |     
 37 |     
 38 |   
 39 |   
 40 |   
 41 |     
 43 |     
 44 |   
 45 |   
 46 |   
 47 |     
 49 |     
 50 |   
 51 |   
 52 |   
 53 |     
 54 |     
 55 |   
 56 | 
    Test space preserved in PRE
    print 'Hello '
      + '<World>';
    ^print ^'Hello '^\n^  + '<World>';^
    Test class="nocode"
    1. print 'Hello '
    2.   + '<World>';
    ^print ^'Hello '^\n^  + '<World>';^
    Test whitespace normalized in code
    print 'Hello '
 36 |   + '<World>';
    ^print ^'Hello ' + '<World>';^
    Test XMP
    print 'Hello '
 42 |   + '<World>';
    ^print 'Hello '\n  + '<World>';^
    Test tabs
    print 'Hello '
 48 | 	+ '<World>';
    ^print 'Hello '\n\t+ '<World>';^
    Test number lines output
    • print 'Hello '
    •   + '<World>';
    ^print ^'Hello '^\n^  + '<World>';^^
    
 57 | 
 58 | 
125 | 
126 | 
    
127 | 
    
128 |  Last modified: Tue Mar 29 16:38:23 PDT 2011 
129 |  
130 | 


--------------------------------------------------------------------------------
/assets/javascripts/prettify/js-modules/numberLines.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Given a DOM subtree, wraps it in a list, and puts each line into its own
  3 |  * list item.
  4 |  *
  5 |  * @param {Node} node modified in place.  Its content is pulled into an
  6 |  *     HTMLOListElement, and each line is moved into a separate list item.
  7 |  *     This requires cloning elements, so the input might not have unique
  8 |  *     IDs after numbering.
  9 |  */
 10 | function numberLines(node, opt_startLineNum) {
 11 |   var nocode = /(?:^|\s)nocode(?:\s|$)/;
 12 |   var lineBreak = /\r\n?|\n/;
 13 | 
 14 |   var document = node.ownerDocument;
 15 | 
 16 |   var whitespace;
 17 |   if (node.currentStyle) {
 18 |     whitespace = node.currentStyle.whiteSpace;
 19 |   } else if (window.getComputedStyle) {
 20 |     whitespace = document.defaultView.getComputedStyle(node, null)
 21 |         .getPropertyValue('white-space');
 22 |   }
 23 |   // If it's preformatted, then we need to split lines on line breaks
 24 |   // in addition to 
    s.
 25 |   var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
 26 | 
 27 |   var li = document.createElement('LI');
 28 |   while (node.firstChild) {
 29 |     li.appendChild(node.firstChild);
 30 |   }
 31 |   // An array of lines.  We split below, so this is initialized to one
 32 |   // un-split line.
 33 |   var listItems = [li];
 34 | 
 35 |   function walk(node) {
 36 |     switch (node.nodeType) {
 37 |       case 1:  // Element
 38 |         if (nocode.test(node.className)) { break; }
 39 |         if ('BR' === node.nodeName) {
 40 |           breakAfter(node);
 41 |           // Discard the 
     since it is now flush against a 
    • .
 42 |           if (node.parentNode) {
 43 |             node.parentNode.removeChild(node);
 44 |           }
 45 |         } else {
 46 |           for (var child = node.firstChild; child; child = child.nextSibling) {
 47 |             walk(child);
 48 |           }
 49 |         }
 50 |         break;
 51 |       case 3: case 4:  // Text
 52 |         if (isPreformatted) {
 53 |           var text = node.nodeValue;
 54 |           var match = text.match(lineBreak);
 55 |           if (match) {
 56 |             var firstLine = text.substring(0, match.index);
 57 |             node.nodeValue = firstLine;
 58 |             var tail = text.substring(match.index + match[0].length);
 59 |             if (tail) {
 60 |               var parent = node.parentNode;
 61 |               parent.insertBefore(
 62 |                   document.createTextNode(tail), node.nextSibling);
 63 |             }
 64 |             breakAfter(node);
 65 |             if (!firstLine) {
 66 |               // Don't leave blank text nodes in the DOM.
 67 |               node.parentNode.removeChild(node);
 68 |             }
 69 |           }
 70 |         }
 71 |         break;
 72 |     }
 73 |   }
 74 | 
 75 |   // Split a line after the given node.
 76 |   function breakAfter(lineEndNode) {
 77 |     // If there's nothing to the right, then we can skip ending the line
 78 |     // here, and move root-wards since splitting just before an end-tag
 79 |     // would require us to create a bunch of empty copies.
 80 |     while (!lineEndNode.nextSibling) {
 81 |       lineEndNode = lineEndNode.parentNode;
 82 |       if (!lineEndNode) { return; }
 83 |     }
 84 | 
 85 |     function breakLeftOf(limit, copy) {
 86 |       // Clone shallowly if this node needs to be on both sides of the break.
 87 |       var rightSide = copy ? limit.cloneNode(false) : limit;
 88 |       var parent = limit.parentNode;
 89 |       if (parent) {
 90 |         // We clone the parent chain.
 91 |         // This helps us resurrect important styling elements that cross lines.
 92 |         // E.g. in Foo
    Bar    
 93 |         // should be rewritten to 
  • Foo
  • Bar
    • .
 94 |         var parentClone = breakLeftOf(parent, 1);
 95 |         // Move the clone and everything to the right of the original
 96 |         // onto the cloned parent.
 97 |         var next = limit.nextSibling;
 98 |         parentClone.appendChild(rightSide);
 99 |         for (var sibling = next; sibling; sibling = next) {
100 |           next = sibling.nextSibling;
101 |           parentClone.appendChild(sibling);
102 |         }
103 |       }
104 |       return rightSide;
105 |     }
106 | 
107 |     var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
108 | 
109 |     // Walk the parent chain until we reach an unattached LI.
110 |     for (var parent;
111 |          // Check nodeType since IE invents document fragments.
112 |          (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
113 |       copiedListItem = parent;
114 |     }
115 |     // Put it on the list of lines for later processing.
116 |     listItems.push(copiedListItem);
117 |   }
118 | 
119 |   // Split lines while there are lines left to split.
120 |   for (var i = 0;  // Number of lines that have been split so far.
121 |        i < listItems.length;  // length updated by breakAfter calls.
122 |        ++i) {
123 |     walk(listItems[i]);
124 |   }
125 | 
126 |   // Make sure numeric indices show correctly.
127 |   if (opt_startLineNum === (opt_startLineNum|0)) {
128 |     listItems[0].setAttribute('value', opt_startLineNum);
129 |   }
130 | 
131 |   var ol = document.createElement('OL');
132 |   ol.className = 'linenums';
133 |   var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
134 |   for (var i = 0, n = listItems.length; i < n; ++i) {
135 |     li = listItems[i];
136 |     // Stick a class on the LIs so that stylesheets can
137 |     // color odd/even rows, or any other row pattern that
138 |     // is co-prime with 10.
139 |     li.className = 'L' + ((i + offset) % 10);
140 |     if (!li.firstChild) {
141 |       li.appendChild(document.createTextNode('\xA0'));
142 |     }
143 |     ol.appendChild(li);
144 |   }
145 | 
146 |   node.appendChild(ol);
147 | }


--------------------------------------------------------------------------------
/manual/js/controles-de-fluxo-e-controles-de-repeticao.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: interna
  3 | title: Controles de Fluxo e Controles de Repetição
  4 | ---
  5 | {% include submenu-js.html %}
  6 | 
  7 | 
    
  8 |   
    Declarações (Statements)
    
  9 |   
    Entendendo Controles de Fluxo e Controles de Repetição
    
 10 | 
 11 |   
    Controles de Fluxo
    
 12 |   
    São comandos da linguagem que permitem desviar o fluxo do programa, dependendo de um teste.
    
 13 | 
 14 |   
    IF
    
 15 |   
    A sintaxe do if é a seguinte:
    
 16 | 
     17 | if (<teste>) {
 18 |   <código a ser executado caso o teste seja verdadeiro>
 19 | }
 20 | 
    
 21 | 
 22 |   
    Podemos, por exemplo, executar um trecho do código unicamente se uma variavel nossa for maior do que dez.
    
 23 | 
     24 | var x = 11;
 25 | if (x > 10) {
 26 |   console.log('x é maior do que dez, corram para as colinas!');
 27 | }
 28 | 
    
 29 | 
 30 |   
    Note, que o console.log não apareceria caso o valor de x fosse 10, 9, 8...
    
 31 | 
     32 | var x = 9;
 33 | if (x > 10) {
 34 |   console.log('x é maior do que dez, corram para as colinas!');
 35 | }
 36 | console.log('Serei executado independente do if ser true ou false');
 37 | 
    
 38 | 
 39 |   
    ELSE
    
 40 |   
    o else não existe sem o if, pois ele não testa nada. Só é executado caso o teste do if retorne falso.
    
 41 | 
     42 | var x = 9;
 43 | if (x > 10) {
 44 |   console.log('x é maior do que dez, corram para as colinas!');
 45 | } else {
 46 |   console.log('Está tudo bem, podemos ficar tranquilos.');
 47 | }
 48 | 
    
 49 | 
 50 |   
    SWITCH
    
 51 |   
    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.
    
 52 | 
     53 | var tinta = 'azul';
 54 | switch (tinta) {
 55 |   case 'azul':
 56 |     console.log('Irei pintar o carro de azul');
 57 |     break;
 58 |   case 'amarela':
 59 |     console.log('Vou pintar a casa de amarelo');
 60 |     break;
 61 |   case 'verde':
 62 |     console.log('Vou pintar o chão da garagem de verde');
 63 |     break;
 64 |   default:
 65 |     console.log('Não vou pintar nada');
 66 |     break;
 67 | }
 68 | 
    
 69 | 
 70 |   
    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.
    
 71 | 
 72 |   
    Se fossemos reescrever esses testes com elseif, ficaria assim:
    
 73 | 
     74 | var tinta = 'azul';
 75 | 
 76 | if (tinta === 'azul') {
 77 |   console.log('Irei pintar o carro de azul');
 78 | } else if(tinta === 'amarela') {
 79 |   console.log('Vou pintar a casa de amarelo');
 80 | } else if (tinta === 'verde') {
 81 |   console.log('Vou pintar o chão da garagem de verde');
 82 | } else {
 83 |   console.log('Não vou pintar nada');
 84 | }
 85 | 
    
 86 |   
    Fica melhor com o switch, ne?!
    
 87 | 
 88 |   
    Laços de repetição (loops)
    
 89 |   
    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).
    
 90 | 
 91 |   
    FOR
    
 92 |   
    Formado por três partes: inicialização, condição e incremento. A sintaxe é:
    
 93 | 
     94 | for (var i = 0; i <= 10; i++) {
 95 |   //código a ser executado até a condição se tornar falsa
 96 | }
 97 | 
    
 98 | 
 99 |   
    FOR IN
    
100 |   
    É utilizado quando não sabemos quantas vezes temos que interar sobre um array ou objeto.
    
101 | 
    102 | var arr = [1,2,3];
103 | for(var n in arr) {
104 |   console.log(n);
105 | }
106 | 
    
107 | 
108 |   
    FOREACH
    
109 |   
    Utilizamos o foreach quando queremos percorrer as propriedades de um objeto ou os itens de um array, sem precisamos nos preocupar em contar quantos são.
    
110 | 
    111 | var arr = [1,2,3];
112 | arr.forEach(function(each){
113 |   console.log(each);
114 | });
115 | 
    
116 | 
117 |   
    WHILE
    
118 |   
    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).
    
119 | 
    120 | var x = true;
121 | while(x) {
122 |   console.log('Jane Doe');
123 |   x = false;
124 | }
125 | 
    
126 | 
127 |   
    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:
    
128 | 
    129 | var i = 1,
130 |     x = 2;
131 | 
132 | while(x < 20) {
133 |   x = x + (x * i);
134 | 
135 |   console.log('O valor atual de x é: ' + x);
136 |   i++;
137 | }
138 | 
    
139 | 
140 |   
    DO WHILE
    
141 |   
    Segue o mesmo princípio do while, mas o corpo é sempre executado pelo menos uma vez, independente da condição, pois primeiro ele faz do e depois testa a condição.
    
142 | 
    143 | do {
144 |   console.log('Jane Doe');
145 | } while(false);
146 | 
    
147 |   
    Apesar da condição já começar como falsa, veremos a string "Jane Doe" uma vez no console do browser.
    
148 | 
149 | 
    
150 | 


--------------------------------------------------------------------------------
/manual/css/box-model.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: interna
  3 | title: Box Model
  4 | ---
  5 | {% include submenu-css.html %}
  6 | 
  7 | 
    
  8 |   
    Box Model
    
  9 |   
    Entendendo como funciona elementos no HTML
    
 10 | 
 11 |   
    Sempre quando vamos estilizar algum elemento via CSS, é comum, e precisamos estar cientes, que alguma alteração que iremos fazer possa impactar em outros elementos. Isso fica fácil de compreender quando entendemos o conceito de box model.
    
 12 | 
 13 |   
    Basicamente, a idéia do box model é composta por quatro partes:
    
 14 |   
      
 15 |     
    • conteúdo
      • 
 16 |     
    • espaçamento
      • 
 17 |     
    • bordas
      • 
 18 |     
    • margens
      • 
 19 |   
    
 20 | 
 21 |   
    Resumindo, podemos dizer que o box model trata-se de como as 4 propriedades acima se relacionam para compor a dimensão do elemento.
    
 22 | 
 23 |   Imagem demonstrando o conceito de box-model
 24 | 
 25 | 
     26 | .classe {
 27 |     width: 50px;
 28 |     height: 50px;
 29 |     border: 1px solid gray;
 30 |     padding: 10px 20px;
 31 | }
 32 | 
    
 33 | 
 34 |   
    Se aplicarmos a classe acima em um elemento, ele vai ter as dimensões que setamos (50 pixels de altura e largura), certo? Errado. O elemento vai ser renderizado com 72 pixels de altura e 92 pixels de largura. Isso acontece devido ao fato das propriedades padding e border serem somadas à largura e altura já definidas, aumentando as dimensões do elemento. Isso nos leva a ver que as propriedades width e height definem as dimensões do seu conteúdo e não do elemento como um todo.
    
 35 | 
 36 |   
    
 37 |     
    Largura
    
 38 |     
    50 (largura definida) + 
    20 (padding left) + 
    20 (padding right) + 
    1 (border left) + 
    1 (border right) => 92 pixels de largura
    
 39 |   
    
 40 | 
 41 |   
    
 42 |     
    Altura
    
 43 |     
    50 (altura definida) + 
    10 (padding top) + 
    10 (padding bottom) + 
    1 (border top) + 
    1 (border bottom) => 72 pixels de altura
    
 44 |   
    
 45 | 
 46 |   
    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 10 pixels de padding e uma borda de 1 pixel.
    
 47 | 
 48 | 
     49 | .dor-de-cabeca {
 50 |     width: 100%;
 51 |     padding: 10px;
 52 |     border: solid 1px gray;
 53 | }
 54 | 
    
 55 | 
 56 |   
    Seu elemento com a classe dor-de-cabeca ultrapassa o limite de 100% que você tinha definido, provavelmente quebrando o layout. A nova largura dele é resultante da soma: 100% (largura definida) + 20 pixels (padding left e right) + 2 pixels (border left e right).
    
 57 | 
 58 |   
    A propriedade box-sizing
    
 59 | 
 60 |   
    Já vimos o tanto de facilidades que o CSS3 trouxe para a vida dos desenvolvedores. Uma delas é a propriedade box-sizing que permite que mudemos o comportamento do box-model.
    
 61 | 
 62 |   
    Por padrão, todos os elementos possuem o valor content-box para essa propriedade. Trata-se do que vimos nos exemplos acima: o box-model é definido apenas pelo conteúdo.
    
 63 | 
 64 | 
     65 | box-sizing: content-box;
 66 | 
    
 67 | 
 68 |   
    Um outro exemplo para exemplificar o box-model com o uso do content-box. Considere os elementos, abaixo:
    
 69 | 
 70 | 
     71 | .elemento1 {
 72 |     background: #ddd;
 73 |     width: 250px;
 74 |     height: 50px;
 75 | }
 76 | 
 77 | .elemento2 {
 78 |     background: #ddd;
 79 |     width: 250px;
 80 |     height: 50px;
 81 |     padding: 0 50px;
 82 | }
 83 | 
    
 84 | 
 85 |   Imagem demonstrando o valor content-box para a propriedade box-sizing e as diferenças no cálculo da largura de elementos
 86 | 
 87 |   
    Os elementos são definidos com a mesma largura, mas como podemos ver na imagem acima, o elemento2 é renderizado maior devido ao padding.
    
 88 | 
 89 | 
    A solução border-box
    
 90 | 
 91 |   
    A propriedade box-sizing permite um novo valor que resolve todos os problemas apresentados nos exemplos anteriores:
    
 92 | 
 93 | 
     94 |     box-sizing: border-box;
 95 | 
    
 96 | 
 97 |   
    O que ela faz? Simples. Ela altera o comportamento do box-model, fazendo com que o navegador calcule a largura/altura do elemento contando não apenas o seu conteúdo (como visto no content-box), mas também considerando o padding (espaçamento) e border (borda) do elemento.
    
 98 | 
 99 |   
    O exemplo anterior, com a aplicação do border-box:
    
100 | 
101 | 
    102 | .elemento1,
103 | .elemento2 { box-sizing: border-box; }
104 | 
105 | .elemento1 {
106 |     background: #ddd;
107 |     width: 250px;
108 |     height: 50px;
109 | }
110 | 
111 | .elemento2 {
112 |     background: #ddd;
113 |     width: 250px;
114 |     height: 50px;
115 |     padding: 0 50px;
116 | }
117 | 
    
118 | 
119 |   Imagem demonstrando o valor border-box para a propriedade box-sizing e o novo comportamento do box-model para o cálculo da largura de um elemento
120 | 
121 |   
    Suporte
    
122 | 
123 |   
    O  suporte atual é bem grande, com mais de 90% (em torno de 77% com suporte parcial e 15% com suporte total), o que nos leva a utilizar os prefixos sempre que formos utilizar a propriedade.
    
124 | 
125 | 
    126 | * {
127 |     -webkit-box-sizing: border-box;
128 |        -moz-box-sizing: border-box;
129 |         -ms-box-sizing: border-box;
130 |             box-sizing: border-box;
131 | }
132 | 
    
133 | 
    
134 | 


--------------------------------------------------------------------------------
/manual/html/oquetags.html:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: interna
  3 | title: O que são tags e atributos
  4 | ---
  5 | {% include submenu-html.html %}
  6 | 
  7 | 
    
  8 |   
    O que são Tags, Elementos e Atributos?
    
  9 |   
    Conhecendo as principais Tags, Elementos e seus Atributos
    
 10 | 
 11 |   
    O que são Tags?
    
 12 |   
    Tags são o conjunto de caracteres que formam um elemento, ou seja, quando nos referenciamos à Tag "p" estamos falando disso: <p>
    
 13 |   
    Existem dois tipos de Tags, as que necessitam de fechamento e as que não necessitam de fechamento.
    
 14 |   
    Para as que necessitam de fechamento, utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior ( > ) para abertura. Para fechamento, utilizamos o sinal de menor ( < ), seguido de barra ( / ), nome do elemento e o sinal de maior ( > ).
    
 15 | 
 16 |   
     17 |     <!-- Exemplo de elemento que necessita de fechamento -->
 18 |     <p>A tag do elemento de parágrafo necessita de fechamento.</p>
 19 |   
    
 20 | 
 21 |   
    Os elementos que não necessitam de fechamento, também conhecidos como elementos vazios, somente utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior ( > ).
    
 22 | 
 23 |   
     24 |     <!-- Exemplo de elemento vazio -->
 25 |     Texto utilizando<br>
 26 |     quebra de linha
 27 |   
    
 28 | 
 29 |   
    O que são Elementos?
    
 30 |   
    Elementos são formados a partir de Tags e entre as Tags é que está o conteúdo do Elemento.
    
 31 |   
    Se quisermos exibir um parágrafo em um site utilizamos a Tag <p> que semanticamente quer dizer que o conteúdo que se espera nesse Elemento é um parágrafo. 
    
 32 | 
 33 |   
    Alguns exemplos:
    
 34 | 
 35 |   
     36 |     <!-- A Tag <label> define que o conteúdo do Elemento é uma label (rótulo)  -->
 37 |     <label>Informe o seu nome</label>
 38 |   
    
 39 | 
 40 |   
     41 |     <!-- A Tag <address> define que o conteúdo do Elemento é um endereço (endereços físicos à virtuais)  -->
 42 |     <address>
 43 |       Este guia é uma iniciativa da comunidade e do Tableless <a href="http://tableless.com.br/contato">www.tableless.com.br</a>
 44 |     </address>
 45 |   
    
 46 | 
 47 |   
    Não confunda Tags com Elementos
    
 48 |   
    As Tags servem para marcar onde começam e terminam os Elementos. Já os Elementos são uma parte conceitual/semântica que têm um começo e fim determinados.
    
 49 |   
    Parece uma diferença boba, mas mantenha ela sempre em mente e isso vai fazer toda a diferença no seu entendimento de HTML.
    
 50 | 
 51 |   
    O que são Atributos?
    
 52 |   
    Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação).
    
 53 |   
    Os Atributos possuem nome e um valor, existem Atributos que você vai usar praticamente sempre e existem outros que serão mais raros.
    
 54 | 
 55 |   
    Atributos globais
    
 56 |   
    Seguem alguns atributos globais importantes e suas descrições simplificadas:
    
 57 |   
    
 58 |     
    accesskey
    
 59 |     
    Determina uma (ou mais) tecla(s) de atalho para o elemento. Para definir mais de uma tecla, coloque-as separadas por espaço.
    
 60 | 
 61 |     
    class
    
 62 |     
    Determina uma (ou mais) classe(s) para o elemento. Para definir mais de uma classe, coloque-as separadas por espaço.
    
 63 | 
 64 |     
    draggable
    
 65 |     
    Define se um elemento é arrastável ou não.
    
 66 |     
 67 |     
    hidden
    
 68 |     
    Oculta o elemento onde for declarado.
    
 69 | 
 70 |     
    id
    
 71 |     
    É o identificador único do elemento. Somente deve ser declarado um id por elemento. E este id não deve ser repetido na mesma página.
    
 72 | 
 73 |     
    lang
    
 74 |     
    Determina o idioma em que está escrito o conteúdo do elemento.
    
 75 | 
 76 |     
    style
    
 77 |     
    Determina propriedades CSS diretamente no elemento.
    
 78 | 
 79 |     
    tabindex
    
 80 |     
    Organiza os elementos por ordem de tabulação. Deve-se usar valor numérico.
    
 81 | 
 82 |     
    title
    
 83 |     
    Representa um auxílio ao elemento. Semelhante a dica do elemento.
    
 84 |   
    
 85 |   
    Como você pôde ver, a sintaxe de Atributos é muito simples, porém, por mais simples que seja é sempre bom ter em mente boas práticas para que se tenha qualidade e fácil manutenção em seu HTML.
    
 86 |   
    Existem Atributos em que os valores não precisam ser passados entre aspas, mas manter um padrão ajuda você e ajuda quem quer que seja que no futuro tenha que trabalhar com o seu HTML. Portanto, não é uma regra mas uma boa prática você envolver os valores dos Atributos entre aspas.
    
 87 | 
 88 |   
     89 |     <!-- Isso funciona, mas não é recomendável -->
 90 |     <a href="http://tableless.com.br" target=_blank>www.tableless.com.br</a>
 91 | 
 92 |     <!-- Isso funciona e é recomendável -->
 93 |     <a href="http://tableless.com.br" target="_blank">www.tableless.com.br</a>
 94 |   
    
 95 | 
 96 |   
    Na prática
    
 97 |   
    Agora que você entendeu separadamente o papel das Tags, Elementos e Atributos, vamos ver um exemplo prático:
    
 98 | 
 99 |   
    100 |     <!-- A Tag <img> define que o conteúdo do Elemento é uma imagem e os atributos que utilizamos são src e alt -->
101 |     <img src="logo.png" alt="HTML 5 Logo" />
102 |   
    
103 |   
104 |   
    Analisando o exemplo:
    
105 |   
    No exemplo acima definimos o caminho onde está a imagem com o Atributo src e utilizamos o Atributo alt para descrever que imagem é essa (a utilização do atributo alt é altamente recomendado, pois, mesmo que a imagem não seja carregada por qualquer motivo, o usuário conseguirá identificar que ali era para ser carregado o logo do HTML5). 
    
106 |   
107 |   
    Fácil, não? Para saber quais Tags existem e como podem ser utilizadas, acesse a documentação do Mozilla clicando aqui
    
108 | 
    
109 | 


--------------------------------------------------------------------------------
/manual/css/float-clear.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: interna
 3 | title: Propriedade Float e Clear
 4 | ---
 5 | {% include submenu-css.html %}
 6 | 
 7 | 
    
 8 |   
    Propriedade Float e Clear
    
 9 |   
    Estruturando e flutuando elementos
    
10 | 
11 |   
    Algo comum ao lermos alguma matéria em revistas ou jornais é uma imagem relacionada ao texto estar posicionada de um lado e, o conteúdo textual contornar a imagem. Algo parecido com isso:
    
12 |   Representação de uma simulação de um layout clássico de revistas e jornais com uma foto do lado esquerdo e texto ao redor dela
13 |   
    E se precisássemos desenvolver um template parecido com a imagem acima. Provavelmente começaríamos com um código HTML assim:
    
14 |   
    15 | <div>
16 |   <figure>
17 |   	<img src="img/imagem.jpg" alt="Imagem Xis">
18 |   	<figcaption>Legenda da imagem"</figcaption>
19 |   </figure>
20 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p>
21 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p>
22 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est</p>
23 | </div>
24 | 
    
25 | 
    O que teríamos seria algo assim:
    
26 | Representação mostrando uma imagem no topo e um bloco de texto abaixo dela
27 | 
    Por que isso? O que acontece é que a tag figure ocupa toda a largura da página e entra no empilhamento do documento/página, o que não permite que outros elementos apareçam ao seu lado.
    
28 | 
    É aí que entra o float. Em resumo, essa propriedade permite que tiremos um elemento do fluxo vertical da página e automaticamente faz com que o conteúdo que venha a seguir flutue ao seu redor.
    
29 | 
    O CSS ficaria assim:
    
30 | 
    31 | figure {
32 |   float: left;
33 |   margin: 0 10px 10px 0;
34 | }
35 | 
    
36 | 
    O que fizemos foi flutuar a tag figure para o lado esquerdo e, colocar uma margem inferior e direita para que os parágrafos não fiquem grudados na imagem. Com isso conseguiríamos reproduzir um layout igual ao da primeira imagem. Poderíamos até variar e colocar nossa imagem do lado direito:
    
37 | 
    38 | figure {
39 |   float: right;
40 |   margin: 0 0 10px 10px;
41 | }
42 | 
    
43 | 
    Aqui mudamos a direção que a tag figure vai flutuar e alteramos a margem do lado direito para o lado esquerdo. E teríamos um resultado assim:
    
44 | Representação simulando um layout clássico de revistas e jornais com uma foto do lado direito e texto ao redor dela
45 | 
    A propriedade clear
    
46 | 
    Continuando com o nosso exemplo anterior, imagine que agora precisássemos inserir um novo título com mais parágrafos abaixo da imagem. Algo parecido com isso: (para fins de exemplo, diminui o conteúdo textual ao redor da imagem)
    
47 | Representação de um layout com imagem localizada no topo esquerdo com parágrafos ao redor dela e um título com mais parágrafos no fluxo da página
48 | 
    Para representar esse conteúdo, teríamos um HTML semelhante a esse:
    
49 |   
    50 | <div>
51 |   <figure>
52 |     <img src="img/imagem.jpg" alt="Imagem Xis">
53 |     <figcaption>Legenda da imagem"</figcaption>
54 |   </figure>
55 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p>
56 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p>
57 |   <h3>Novo título</h3>
58 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p>
59 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p>
60 | </div>
61 | 
    
62 | 
    No entanto, chegaríamos num resultado assim:
    
63 | Representação de um layout com imagem localizada no topo esquerdo com conteúdo textual ao redor dela
64 | 
    Por que isso? Como definimos que a tag figure 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 figure são menores que a altura da imagem, fazendo com que o título (tag h3) ao invés de ser renderizada abaixo da imagem, apareça ao lado dela e seguindo o fluxo do documento.
    
65 | 
    É aí que entra a propriedade clear. 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 float. Em outras palavras, ela especifica se um elemento deve ser posicionado ao lado de elementos com float ou se devem ser colocados abaixo deles. A propriedade aceita 4 valores: 
    
66 | 
      
67 |   
    • left: Elemento é empurrado para baixo de elementos com float left;
      • 
68 |   
    • right: Elemento é empurrado para baixo de elementos com float right;
      • 
69 |   
    • both: Elemento é empurrado para baixo de elementos com float left ou right;
      • 
70 |   
    • none: Elemento não é empurrado para baixo de elementos com float.
      • 
71 | 
    
72 | 
    O CSS ficaria assim:
    
73 | 
    74 | figure {
75 |   float: left;
76 |   margin: 0 10px 10px 0;
77 | }
78 | 
79 | h3 { clear: both; }
80 | /* Pelo fato da tag figure utilizar float left, aqui também poderíamos usar clear: left; */
81 | 
    
82 | 
    E com isso, conseguiríamos fazer com que o título (tag h3) fosse empurrado para baixo, sendo renderizado abaixo da tag figure e ficando igual ao layout que queríamos.
    
83 | 
    Mais exemplos
    
84 | 
    Esse foi apenas um exemplo da utilização da propriedade float. Outros casos que você pode ver em vários websites são:
    
85 | 
    
86 |   
    Menus de navegação
    
87 |   
    Float usado nos itens da lista. Mais precisamente em cada li, para dispor os itens do menu na horizontal.
    
88 |   
    Grids
    
89 |   
    Float usado para dividir partes do grid. Por exemplo, colocar um bloco de conteúdo à esquerda e um outro bloco à direita.
    
90 | 
    
91 | 
    
92 | 


--------------------------------------------------------------------------------